站在React的角度理解React

前言

本文基于建造属于你的react 这篇文章整理出来React的简单实现过程和一些核心概念，具体的细节和实现过程请参考原文。

React渲染过程中有两个重要的对象 ReactElement 对象和 fiber 对象

ReactElement 对象

所有采用jsx语法书写的节点, 都会被编译器转换, 最终会以React.createElement(...)的方式, 创建出来一个与之对应的ReactElement对象。

ReactElement对象可以理解为jsx语法的翻译。

fiber 对象

fiber对象是通过ReactElement对象进行创建的, 多个fiber对象构成了一棵fiber树, fiber树是构造DOM树的数据模型, fiber树的任何改动, 最后都可以体现到DOM上。

为什么要引入fiber树呢，是因为如果直接用ReactElement对象渲染页面的话，只能一次递归处理完，这样浏览器呈现卡死的状态，但是使用fiber树渲染页面可以随时中断，将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。

`ReactElement` 对象

jsx 转换为原生 js 需要通过一些诸如babel的编译工具。编译的过程把所有元素标签部分所有内容转换为 React.createElement(...)函数，给函数传递元素标签名，标签上面的属性（prop），以及标签的子节点（children）。

例如如下的jsx节点：


const element = (
    <div id="id">
      <div className="className">
        <h3 style="color: red">
          <span>hello</span>
        </h3>
      </div>
      <header>
        <h2>World</h2>
      </header>
    </div>
  )

最终会被React.createElement(...)转化成如下的一个对象返回：


{
  "type": "div",
  "props": {
    "id": "id",
    "children": [
      {
        "type": "div",
        "props": {
          "className": "className",
          "children": [
            {
              "type": "h3",
              "props": {
                "style": "color: red",
                "children": [
                  {
                    "type": "span",
                    "props": {
                      "children": [
                        {
                          "type": "TEXT_ELEMENT",
                          "props": {
                            "nodeValue": "hello",
                            "children": []
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "type": "header",
        "props": {
          "children": [
            {
              "type": "h2",
              "props": {
                "children": [
                  {
                    "type": "TEXT_ELEMENT",
                    "props": {
                      "nodeValue": "World",
                      "children": []
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }
}