概览
文章内容选自极客时间 ebay 技术专家王沛的《 React 实战进阶》，本文的主题是 JSX 的本质：不是模板引擎，而是语法糖。
小结
1、JSX 的本质
2、如何使用 JSX
3、JSX 的优点
内容
JSX 的本质
JSX：在 JavaScript 中直接使用 HTML 标记，实质是：调用 React 的 createElement API
createElement (标记类型, 属性：对象类型, 子元素1, 子元素2 ...)
image.png
等价于：
image.png
结论：利用 JavaScript 原生语法实现动态创建 UI，不用学习新的模板语言
如何使用JSX
思考：如何在 JSX 中使用 JavaScript 特性 ？
答案：表达式。
1、JSX 本身也是表达式：
image.png
2、在属性中使用表达式：
image.png
3、延展属性：
image.png
4、表达式作为子元素：
image.png
对比其它模板语言：不需要学习新语法
image.png
JSX的优点
1、直观：声明式创建界面的直观
2、灵活：代码实现动态创建界面的灵活
3、学习成本：不需要学习新的模板语言
约定
1、React 认为小写的 Tag 是原生的 DOM 节点
2、大写字母开头为自定义组件
3、JSX 标记可以直接使用 属性语法，例如：<menu.Item />
网友评论