JSX

<button class=“btn btn-bule”><em>Confirm</em></button>

=====>浏览器会解析====>虚拟dom

{
type:”button”,
props:{
    className:”btn btn-bule”,
    children:{
        type:”em”,
        props:{
            children:”Confirm"
        }
        }
    }
}

JSX基本原理

JSX官方定义是类XML语法的ECMAScript扩展。它利用了Javacript自带的语法和特性，并使用HTML语法来创建虚拟元素
JSX将HTML语法直接加入到Javascript代码中，再通过翻译器转换到纯Javascript后由浏览器执行
在实际开发中，JSX在产品打包阶段都已经编译成纯Javascript，不会带来副作用。
babel作为专门的javascript语法编译工具，本质是通过React.reacteElememt来创建元素

JSX基本语法

定义标签哈斯，只允许被一个标签包裹
标签一定要闭合
如果使用数据形式，必须对数组中的每一个元素都要给一个唯一的key值
元素如果是小写首字母则是元素，如果是大写首字母则是组件元素
我们也可以使用命名空间的方式以解决组件相同名称冲突的问题
注释需要用{}包裹
class属性改为className
for属性改成htmlFor
传入数据的展开性{…props}
属性值要使用表达式；只要将{}来替换“”
HTML转译—React会将所有要显示DOM的字符串转译，防止XSS；
JSX中，我们必须使用驼峰的形式来书写事件的属性名

推荐阅读更多精彩内容