React In Depth - React 源码解析 - render() & Fiber

原载于 https://szhshp.org/tech/2019/08/10/reactindepthrender.html, 转载请注明

Preparation

V16.8.6

克隆react源码, github 地址：https://github.com/facebook/react.git

安装 gulp, npm 有些版本会报错所以我们直接用 gulp

npm install gulp -g
gulp install
gulp build

然后 build 文件夹就可以看到 react 的源码

First Glance

JSX 其实就是 React.createElement(component, props, ...children) 的语法糖, 最终就会被 Babel 解析成 React.createElement() 方法

V16 之后, 每一个 Component 都会使用 createElement() 方法处理成 ReactElement 实例

一般我们的渲染会从这一段开始:

ReactDOM.render( < App / > , document.getElementById('root'));
// 我们使用 `ReactDOM.render()` 的时候就会将 App 这个 ReactElement 传给第一个参数

ReactDOM.render()

我们看一下 ReactDOM.render() 的代码:

render: function(element, container, callback) {
   
  ...
  return
  legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
},

可以看到最终调用了 legacyRenderSubtreeIntoContainer 方法:

function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
   
  /* 省略 warning 部分 */
  var root = container._reactRootContainer;
  var fiberRoot = void 0;
  if (!root) {
   
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
   
      /* 省略 callback 处理部分 */
    }
    // Initial mount should not be batched.
    unbatchedUpdates(function() {
   
      updateContainer(children, fiberRoot, parentComponent, callback);
    }