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；
• 为了防止转移这个问题，React提供了dangerouslySetInnerHTML <div dangerouslySetInnerHTML={{__html:”cc©2015"}}/>
• JSX中，我们必须使用驼峰的形式来书写事件的属性名