<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中，我们必须使用驼峰的形式来书写事件的属性名
