微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

React中JSX的本质:不是模板引擎,而是语法糖

2018-06-27 17:56 王沛
作者|王沛
编辑|覃云

在 React 的开发中,会经常使用一种特殊的语法来描述 React 的组件,叫做 JSX,虽然它看上去像是一种模板语言,但是其实它是一种语法糖。

JSX 的特点是能够让开发者在 JavaScript 代码中直接写 HTML 的标记,这也是 React 推出时最受争议的一点,就是如何去把 UI 的描述放到代码中。

比如我们先来定义一个变量 const name = ' Nate Wang ',再定义一个 HTML 的

const element = <h1>Hello,{name}</h1>;

把变量显示出来,定一个 h1 的标记。

所以可以看到 element 使用了一个 HTML 标记来表示一个节点,之所以这样去写,是因为它的本质是在于动态创建了一个组件,而且用的是 JavaScript 的语法。

了解 DOM 的 API 的话,你会发现除了用 HTML 描述一个节点,还可以用 JavaScript 的 DOM API,比如说 Document.creatElement 的方式来创建一个原生的 DOM 节点。

对 React 来说也是一样,当我们要创建一个组件的时候,既可以用声明式的方式像 HTML 标记一样去声明一个组件,同样我们也可以用 JavaScript 语法,比如说 React.creatElement 来动态地创建一个组件。

上图是一个很简单的例子:创建一个 h1 的标记,给它一个标记的类型,h1 就是 Comment 的第一个参数标记的类型。第二个传给它的属性,右侧的代码中并没有,所以是 null,Hello 是他的 Children,name 也是他的 Children,从第三个参数开始,后面都是这个元素的子元素,所以创建一个 h1 这样的 Element,我们可以很清楚的看到上图中左和右哪一种更直观,所以说 JSX 的本质是:可以让你去一种更方便的方式动态的创建组件。