介绍
JavaScript XML，react定义的一种类似于XML的JS扩展语法，JS + XML本质是React.createElement(component, props, ...children)方法的语法糖。
XML：简单来讲就是一种用于存储和传输数据的格式，很像html，因为格式中有很多浪费空间的写法，于是后来有了JSON格式。XML现在还有使用需求。
作用
上一篇也说了，在react中写jsx比写js更加便捷，简单来说jsx就是用来简化创建虚拟DOM。
语法规则
定义虚拟DOM时，不要写引号
<script type="text/babel" >
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
</script>
标签中混入JS表达式时要用{}
const myId = "abox";
const myData = "HeLlo";
const data = ['Angular','React','Vue']
<script type="text/babel" >
const VDOM = (
<div>
<h1 id={myId.toLowerCase()}>
{myData.toLowerCase()}
</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
</script>
{} 中不能放入js语句，要放入js表达式，两者的区别是：
JS表达式：能产生一个值，都可以用个变量去接到数据const x = ，例如：
- a 一个变量
- a+b
- demo(1) 有返回值
- arr.map() 有返回值
- function test () {} 返回整个函数
JS语句(代码)：就理解为和表达式相反的，不会返回一个数字，例如：
- if(){}
- for(){}
- switch(){case:xxxx}
样式的类名指定不要用class，要用className
<script type="text/babel" >
const VDOM = (
<h2 className="title">
wow
</h2>
)
</script>
内联样式，要用 style={{key:value}} 的形式去写
<script type="text/babel" >
const VDOM = (
<h2 style={{ color: "white", fontSize: "29px" }}>
</h2>
)
</script>
只有一个根标签
和vue的template一样。
标签必须闭合
必须得~~~
标签首字母意义
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
注意：
一、jsx里写的可不是html，而就是jsx，经过react转换后才是html。
二、jsx最终产生的就是一个JS对象
需要babel转译
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行，只要用了JSX，都要加上type="text/babel", 声明需要babel来处理。
使用
ReactDOM.render(virtualDOM, containerDOM)上篇文章也写了如何使用。这里就不再记录了。
|