React—04—jsx的本质；babel干了什么；

 

 

jsx和vue的template是一样的，都需要经过编译器转化。

template会通过vue.js自带的complier编译模块成一个render函数，然后模板里的vue元素会编译成render函数里的 h函数（h函数本质也是vue自己写的createElement函数），

vue.js通过h函数构成一个虚拟dom树，最终渲染成真实dom。

 

react是本身就有render函数，然后render函数里的jsx代码会通过babel.js编译成React.createElement函数，然后render函数也是return这个React.createElement函数，

react通过个React.createElement函数，构成一个虚拟dom树，最终渲染成真实dom。

 

 

这两种方式的渲染结果，是一样的。

因此jsx只是React.createElement()的语法糖罢了，所以jsx本质就是react元素。

同理，vue的template模板也只是h函数的语法糖罢了。

  class App extends React.Component {
        constructor() {
          super();
          this.state = {
            name: '张三'
          };
        }

        render() {
          // return (
          //   <div>
          //     学生列表:
          //     <div className="container">
          //       <div className="header">我是头部</div>
          //       <div className="item">
          //         <p>{this.state.name}</p>
          //       </div>
          //       <div className="footer">我是底部</div>
          //     </div>
          //   </div>
          // );

          return /*#__PURE__*/ React.createElement(
            'div',
            null,
            '\u5B66\u751F\u5217\u8868:',
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'container'
              },
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'header'
                },
                '\u6211\u662F\u5934\u90E8'
              ),
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'item'
                },
                /*#__PURE__*/ React.createElement('p', null, this.state.name)
              ),
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'footer'
                },
                '\u6211\u662F\u5E95\u90E8'
              )
            )
          );
        }
      }

 

所以说template模板也好，jsx也好，都不是标准的html语法，都只是vue或react提供给框架专有的html模板写法罢了，当我们用特有的语法写完后，还是会通过编译模块转化成一个个对象节点，而不是直接变成了html元素。

这些对象节点构成了虚拟dom树，最终再通过dom操作（document.createElement()）把这些虚拟dom渲染成真实dom，这才是正式真实的html元素。

 

 

vue是响应式更新的（数据劫持），改变后重新渲染，也即是重新调用一遍render函数，然后渲染一次template模板。

react需要使用this.setState才会重新渲染，也即是重新调用一遍render函数。