JSX的本质：不是模板引擎，而是语法糖

概览

文章内容选自极客时间 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 />