首先,严格定义上来说,JSX 是 react 提供的一种标签式的组件声明语法。JSX 只是一种js语言的扩展语法糖,在正式环境运行前,需要经过 babel 工具编译为正式的 JS 代码。
在正式介绍JSX 之前,我们有必要理解,react 框架实现了 virtual dom 功能,开发者可通过react的双向绑定、组件、组件嵌套等工具,将页面的构建逻辑交付于react框架即可,而无需执行实际的 DOM 操作。为了实现 virtual dom ,react 将 DOM 映射为 Component 对象,将 DOM 树映射为组件树。为此,react提供了 createClass
接口用于定于 Component;提供了 createElement
接口用于构建组件树。
基本语法
JSX 高度兼容HTML,即使是react新手也可以迅速写出 JSX 代码:
const element = <div> <button>这是一个 button</button> <button style={{ width: 100 }}>这是一个包含 style 属性的 button</button> <button className="btn btn-default">这是一个带 className 的 button</button> <button className="btn btn-default" onClick={() => alert('click me')}>这是一个带事件处理的 button</button> <div className="btn-group"> <button className="btn btn-default">这是被 div 包围的 button</button> <button className="btn btn-default">这也是被 div 包围的 button</button> </div> </div>;
这是JSX的基本形式,编译后的代码:
var element = _react2.default.createElement( 'div',null,_react2.default.createElement( 'button','\u8FD9\u662F\u4E00\u4E2A button' ),{ style: { width: 100 } },'\u8FD9\u662F\u4E00\u4E2A\u5305\u542B style \u5C5E\u6027\u7684 button' ),{ className: 'btn btn-default' },'\u8FD9\u662F\u4E00\u4E2A\u5E26 className \u7684 button' ),{ className: 'btn btn-default',onClick: function onClick() { return alert('click me'); } },'\u8FD9\u662F\u4E00\u4E2A\u5E26\u4E8B\u4EF6\u5904\u7406\u7684 button' ),_react2.default.createElement( 'div',{ className: 'btn-group' },_react2.default.createElement( 'button','\u8FD9\u662F\u88AB div \u5305\u56F4\u7684 button' ),'\u8FD9\u4E5F\u662F\u88AB div \u5305\u56F4\u7684 button' ) ) );
与html主要的不同点为:
声明属性
JSX中,父组件可通过属性方式,将配置值传递到子组件中:
const element = <div tabIndex="0" name="someDiv"></div>;
标签属性最终被编译成对象,传递到 createElement
接口,如上述代码编译结果为:
var element = React.createElement("div",{ tabIndex: "0",name: "someDiv" });
属性值既接受字符串,也接受js表达式,同样通过 {}
闭合,如:
const areWeRocking = true; const element = <div areWeRocking={areWeRocking}></div>;
嵌套子组件
JSX 中,标签可以包含子标签,子标签集合会被编译为 children
传递到 createElement
函数,如:
const element = <div> <button>这是一个button</button> </div>;
编译结果:
var element = React.createElement( "div",React.createElement( "button",null "\u8FD9\u662F\u4E00\u4E2Abutton" ) );
嵌套js逻辑
JSX 支持嵌套 js表达式,方式非常简单,使用 {}
包含表达式即可,这使得我们可以轻易地在JSX实现各种逻辑
循环
const array = [1,2,3,4]; const element = <div>{array.map(item => <span>{item}</span>)}</div>;
分支
const areWeRocking = true; const element = <div>{areWeRocking ? 'awesome' : 'holy shit'}</div>;
const giveMeYourName = () => <strong>tecfan</strong>; const element = <div>{giveMeYourName()}</div>;
JSX 表达能力非常强,一是可以无限制的嵌套组件标签、js代码,实现复杂逻辑;二是支持函数表达式,通过函数我们可以实现任意功能。
JSX 树编译逻辑
JSX 语法并不晦涩,只有三条简简单单的规则:
编译器而言的处理逻辑也会变的很简单:
上面过程中生成的变量 tagNaem、props、children 被传递到 createElement
接口:
React.createElement( tagName,props,...children )
后记
在web领域我们见过太多模板,angular、vue、lodash、swig...各种模板都构造了其独特的语法、控制结构,许多甚至已经大幅度偏离html语法基础。
JSX 则成功的另辟小径,只提供基于html的语法糖,只要熟悉html、js,入门难度非常低。良好的程序结构,应该是简单纯粹,而又不失表达能力的,JSX正符合这种良好设计。