JSX本质

• JSX是React引入的，但不是React独有的
• React已经将它作为一个独立标准开放，其他项目也可用
• React.createElement是可以自定义修改的
• 本身功能已经完备，和其他标准兼容和扩展没问题

问: JSX的本质是什么 答：JSX是语法糖，无法直接被浏览器解析，需要转换为js 我们在写组件的时候需要import React，但是代码可见的地方并没有直接用。其实这里的引入的react就是为了转换jsx用的。 我们来看是怎么转换的：

// JSX代码
var profile = <div>
                <img src=‘avatar.png’ className=‘profile’ />
                <h3>{[user.firstName, user.lastName].join(‘ ')}</h3>
              </div>;
//解析结果
var profile = React.createElement(‘div’, null, 
    React.createElement(‘img’, {src: '’avatar.png’, className: ‘profile’}),
    React.createElement(‘h3’, null, [user.firstName, user.lastName].join(‘ ‘))
);

再看一个例子：

// JSX代码
render(){
    const list = this.props.data;
    return (
        <ul>
            {
                list.map((item, index) => {
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    );
}

//解析结果
function render(){
    const list = this.props.data;
    return React.createElement(
        ’ul’,
        null,
        list.map((item, index) => {
            return React.createElement(
                ‘li’,
                {key: index},
                item
            );
         })
    );
}

以上都是html默认标签，但当我们写自定义的组件时候是怎么转换的呢：

// 自定义组件jsx代码
return (
    <div>
        <Input addTitle={this.addTitle.bind(this)}/>
        <List data={this.state.list}/>
    </div>
);

// 解析结果
return React.creatElement(‘div’, null,
    React.createElement(Input, {addTitle: this.addTitle.bind(this)}),
    React.createElement(List, {data: this.state.list})
)

可以看到React.createElement这里传的第一个参数不是字符串形式的了，而是一个函数类型，其实是构造函数。

自定义组件的解析：

• ‘div’ 直接渲染
  即可，vdom可以做到
• Input和List，是自定义组件（class），vdom默认不认识
• 因此Input和List定义的时候必须声明 render函数
• 根据props初始化实例，然后执行实例的render函数
• render函数返回的还是vnode对象

通过上面三个例子可以看到是使用了React.createElement()方法进行的jsx转换，这也是为什么要import React的原因。

熟悉vdom的人应该可以发现React.createElement这里的用法和传参都很像vdom里的h函数，那两者之间的关系是什么呢？

• 我们理解React.createElement就是h函数，返回的都是vnode

那vdom里的patch函数又是何时调用的呢：

• 初次渲染 - ReactDOM.render(, container) ：会触发patch(container, vnode)
• re-render - setState：会触发patch(vnode, newVnode)

问题解答

• 为何需要vdom: JSX需要渲染成html， 数据驱动视图
• React.createElement和h，都生成vnode
• 何时patch: ReactDOM.render(…)和setState
• 自定义组件的解析：初始化实例，然后执行render