一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情

4.JSX的本质

4.1 JSX的本质： React.creatElement语法糖

• babel作用：将jsx代码转化为React.createElement(type, config, children)

• React.creatElement() 源码位置：package > React.js > ReactElement.js > export function createElement(type, config, children) {

• reactElemtn()参数解析：

  • type：当前ReactElement类型， div标签， 其他组件
  • config：键值对存储jsx属性
  • children：存放标签内容（根为单个元素），多个元素React内部进行处理

• 利用babeljs.io将jsx转化为React代码：

<div>
    <div className='header'>
        <h1 title='标题'>我是标题</h1>
    </div>
    <div className='content'>
        <h2>我是页面内容</h2>
        <button>按钮</button>
        <button>+1</button>
        <a href="http://www.baidu.com">百度一下</a>
    </div>
    <div className='footer'>
        <p>我是尾部内容</p>
    </div>
</div>
{/*  转化后 */}
"use strict";

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  className: "header"
}, /*#__PURE__*/React.createElement("h1", {
  title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u9898")), /*#__PURE__*/React.createElement("div", {
  className: "content"
}, /*#__PURE__*/React.createElement("h2", null, "\u6211\u662F\u9875\u9762\u5185\u5BB9"), /*#__PURE__*/React.createElement("button", null, "\u6309\u94AE"), /*#__PURE__*/React.createElement("button", null, "+1"), /*#__PURE__*/React.createElement("a", {
  href: "http://www.baidu.com"
}, "\u767E\u5EA6\u4E00\u4E0B")), /*#__PURE__*/React.createElement("div", {
  className: "footer"
}, /*#__PURE__*/React.createElement("p", null, "\u6211\u662F\u5C3E\u90E8\u5185\u5BB9")));

4.2 虚拟DOM创建过程

• 通过React.createElement创建一个ReactElement对象

• ReactElement对象的作用：

  • React利用ReactElement对象组建了JavaScript对象树 -> Virtual DOM树

• 为什么采用虚拟DOM：

  • 真实状态比较难跟踪，不方便调试
  • 真实DOM操作性能较低
    • document.createElement本身创建出的对象比较复杂
    • DOM操作会引起回流和重绘，应避免频繁DOM操作(合并多次DOM操作)

• 虚拟DOM本质：由命令式编程 -> 声明式编程

  • React官方解释：Virtual DOM是一种编程理念：UI虚拟化形式保存，利用ReactDOM.render()同步虚拟DOM和真实DOM，该过程称做协调(Reconcilia)
  • 声明式编程特点：coder(UI状态) React(DOM匹配该UI状态 -> 操作DOM、属性、事件处理)