React源码解析之ReactDOM.render()

iKcamp 发布于2019-08-26 10:45 / 2998人阅读

摘要：一更新的方式有三种渲染接下来，我们就来看下源码二作用在提供的里渲染一个元素，并返回对该组件的引用常见的用法是这个官网网址源码服务端使用方法渲染节点是让服务端尽可能复用节点，提高性能元素容器应用渲染结束后，调用的函数错误抓取方法本质是返回

一、React更新的方式有三种：
（1）ReactDOM.render() || hydrate（ReactDOMServer渲染）
（2）setState
（3）forceUpdate

接下来，我们就来看下ReactDOM.render()源码

二、ReactDOM.render(element, container[, callback])

作用：
在提供的container里渲染一个React元素，并返回对该组件的引用

常见的用法是这个：

</>复制代码 
ReactDOM.render(, document.getElementById("root"));

官网网址：
https://zh-hans.reactjs.org/docs/react-dom.html#render

源码：

</>复制代码 
const ReactDOM: Object = {
  //服务端使用hydrate方法渲染节点
  hydrate(element: React$Node, container: DOMContainer, callback: ?Function) {
    invariant(
      isValidContainer(container),
      "Target container is not a DOM element.",
    );
    // TODO: throw or warn if we couldn"t hydrate?
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      //true是让服务端尽可能复用节点，提高性能
      true,
      callback,
    );
  },
  render(
    //元素
    element: React$Element,
    //容器
    container: DOMContainer,
    //应用渲染结束后，调用的函数
    callback: ?Function,
  ) {
    //错误抓取
    invariant(
      isValidContainer(container),
      "Target container is not a DOM element.",
    );
    //render方法本质是返回了函数legacyRenderSubtreeIntoContainer
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      //render不会复用节点，因为是前端渲染
      false,
      callback,
    );
  },
}

解析：
（1）render()方法本质是返回了函数legacyRenderSubtreeIntoContainer()

（2）hydrate()和render()的唯一区别是传入legacyRenderSubtreeIntoContainer()的第四个参数不一样：
hydrate()为true，表示在服务端尽可能复用节点，提高性能;
render()为false，表示在浏览器端不会去复用节点，而是全部替换掉。

三、legacyRenderSubtreeIntoContainer()

作用：
初始化Container

源码：

</>复制代码 
// null, element, container, false, callback,
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  //render中一般渲染的是DOM标签，所以不会有_reactRootContainer存在，
  // 所以第一次渲染，root是不存在的
  let root: _ReactSyncRoot = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount
    //创建一个ReactRooter
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
    //判断是否有callback
    if (typeof callback === "function") {
      const originalCallback = callback;
      callback = function() {
        //根据fiberRoot获取公共Root实例
        //就是fiberRoot.current.child.stateNode
        const instance = getPublicRootInstance(fiberRoot);
        //通过该实例instance 去调用originalCallback方法
        originalCallback.call(instance);
      };
    }
    // Initial mount should not be batched.
    //初始化安装不应该批量更新
    unbatchedUpdates(() => {
      //element,fiberRoot,null,callback
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === "function") {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

解析：
（1）由于是第一次渲染更新，所以root是null，只需看!root的情况

（2）legacyCreateRootFromDOMContainer(container,false,)的作用是创建ReactRooter，稍后会讲解

（3）unbatchedUpdates(fn)的简化源码如下：

</>复制代码 
unbatchedUpdates(fn){
  return fn()
}

（4）updateContainer()的作用是更新container，稍后讲解

四、legacyCreateRootFromDOMContainer(container,forceHydrate,)

作用：
创建一个ReactRooter

源码：

</>复制代码 
//创建ReactRooter
function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): _ReactSyncRoot {
  //是否是服务端渲染
  const shouldHydrate =
    //render的forceHydrate是false，所以会调用shouldHydrateDueToLegacyHeuristic方法来判断是否是服务端渲染
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // First clear any existing content.
  //如果不是服务端渲染的话
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    //循环删除container的子节点
    //为什么要删除？因为React认为这些节点是不需要复用的
    while ((rootSibling = container.lastChild)) {
 
      container.removeChild(rootSibling);
    }
  }
  // Legacy roots are not batched.
  //container是空的container,0,false
  //ReactRoot是同步的
  //sync 同步
  //async 异步
  return new ReactSyncRoot(container, LegacyRoot, shouldHydrate);
}

解析：
（1）render()的forceHydrate是false，所以看shouldHydrateDueToLegacyHeuristic(container)是否返回false

① shouldHydrateDueToLegacyHeuristic()

作用：
判断是否是服务端渲染

源码：

</>复制代码 
//判断是否是服务端渲染
function shouldHydrateDueToLegacyHeuristic(container) {
  //获取container的第一个节点（根节点）
  //也就是 id="root" 的节点
  const rootElement = getReactRootElementInContainer(container);
  return !!(
    rootElement &&
    rootElement.nodeType === ELEMENT_NODE &&
    //判断是否是服务端渲染
    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
  );
}

② getReactRootElementInContainer()

作用：
获取container中的第一个节点（或文档节点）

源码：

</>复制代码 
//获取Container里的RectRoot元素
//返回document节点或第一个子节点
function getReactRootElementInContainer(container: any) {
  if (!container) {
    return null;
  }
  //DOCUMENT_NODE 即 window.document
  if (container.nodeType === DOCUMENT_NODE) {
    return container.documentElement;
  } else {
    return container.firstChild;
  }
}

也就是说，判断是否是服务端渲染的标志是：
在获取container中的第一个节点（或文档节点）后，看该节点是否有属性ROOT_ATTRIBUTE_NAME

ROOT_ATTRIBUTE_NAME是什么呢？

</>复制代码 
//服务端渲染的话，会在React App的第一个元素上添加该属性
//以标识是服务端渲染的
export const ROOT_ATTRIBUTE_NAME = "data-reactroot";

即data-reactroot

（2）由（1）可知，render()的container的首节点是没有data-reactroot属性的，所以会进行while循环，依次删除container的子节点，删除完毕后，new 一个ReactSyncRoot()的实例

（3）ReactSyncRoot()

作用：
创建ReactRoot实例

源码：

</>复制代码 
// container,0,false
function ReactSyncRoot(
  container: DOMContainer,
  tag: RootTag,
  hydrate: boolean,
) {
  // Tag is either LegacyRoot or Concurrent Root
  const root = createContainer(container, tag, hydrate);
  this._internalRoot = root;
}

把创建的root作为legacyCreateRootFromDOMContainer()的__internalRoot属性

① createContainer

作用：
创建React容器

源码：

</>复制代码 
//创建React容器
export function createContainer(
  containerInfo: Container,
  tag: RootTag,
  hydrate: boolean,
): OpaqueRoot {
  //创建FiberRoot
  return createFiberRoot(containerInfo, tag, hydrate);
}

也就是说legacyCreateRootFromDOMContainer()的本质是创建了FilberRoot

五、updateContainer()

作用：
创建更新container

源码：

</>复制代码 
//更新Container
export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component,
  callback: ?Function,
): ExpirationTime {
  const current = container.current;
  //1073741823
  const currentTime = requestCurrentTime();
  const suspenseConfig = requestCurrentSuspenseConfig();
  //计算过期时间，这是React优先级更新非常重要的点
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

解析：

（1）requestCurrentTime()

作用：
计算新开始的时间

源码不用看，只需要知道该时间，是以V8引擎上最大31位整数1073741823为根据的：

</>复制代码 
// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// Math.pow(2, 30) - 1
// 0b111111111111111111111111111111
//整型最大数值，是V8中针对32位系统所设置的最大值
export default 1073741823;

（2）requestCurrentSuspenseConfig()和computeExpirationForFiber()以后会讲解

（3）updateContainerAtExpirationTime()

作用：
每到过期时间，就更新container，过期时间单位为 10ms

源码：

</>复制代码 
//在过期时间内，更新container
export function updateContainerAtExpirationTime(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  // TODO: If this is a nested container, this won"t be the root.
  const current = container.current;
  //由于parentComponent为null,所以返回空对象{}
  const context = getContextForSubtree(parentComponent);
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
  //计划更新Root
  return scheduleRootUpdate(
    current,
    element,
    expirationTime,
    suspenseConfig,
    callback,
  );
}

解析：

① scheduleRootUpdate()

作用：
计划更新Root

源码：

</>复制代码 
//计划更新Root
function scheduleRootUpdate(
  current: Fiber,
  element: ReactNodeList,
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  callback: ?Function,
) {
  //创建更新的时间节点
  const update = createUpdate(expirationTime, suspenseConfig);
  // Caution: React DevTools currently depends on this property
  // being called "element".
  update.payload = {element};
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    warningWithoutStack(
      typeof callback === "function",
      "render(...): Expected the last optional `callback` argument to be a " +
        "function. Instead received: %s.",
      callback,
    );
    update.callback = callback;
  }
  if (revertPassiveEffectsChange) {
    flushPassiveEffects();
  }
  //一整个React应用中，会有多次更新，而这多次更新均在更新队列中
  enqueueUpdate(current, update);
  //进行任务调度
  //当React进行Update后，就要进行调度
  //即 根据任务的优先级去调度任务
  //先执行优先级高的任务，
  scheduleWork(current, expirationTime);
  return expirationTime;
}

解析：
任务调度是React中最重要、复杂的内容，之后会慢慢来解析。
这里可以看到，React将初始化的Update放入了更新队列中，并进行任务调度，最终返回了一个expirationTime

也就是说，updateContainer()本质是返回了expirationTime

六、getPublicRootInstance()

作用：
获取root实例

源码：

</>复制代码 
//获取root实例
export function getPublicRootInstance(
  container: OpaqueRoot,
): React$Component | PublicInstance | null {
  //看到container.current，我就想到了ref（xxx.current）
  //获取当前节点
  const containerFiber = container.current;
  if (!containerFiber.child) {
    return null;
  }
  switch (containerFiber.child.tag) {
    case HostComponent:
      return getPublicInstance(containerFiber.child.stateNode);
    default:
      return containerFiber.child.stateNode;
  }
}

解析：
由于是 React 初始化，所以container.current是没有子节点的，所以该方法返回 null

七、ReactDOM.render()流程图

总结：
ReactDOM.render() 的更新步骤
（1）创建 ReactRoot，ReactRoot 是创建整个React应用的根对象

（2）创建 FiberRoot 和 RootFiber

（3）创建更新（创建更新后，就会进入调度阶段，调度阶段由调度器进行管理）

GitHub：
https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react-dom/src/client/ReactDOM.js

（完）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106728.html

ReactDOM.render源码解析-1

摘要：本文将对源码做一个初步解析。首先在方法中校验参数是否合法，然后调用在中，调用拿到了的一个实例，调用拿到了，用于注入到，和作为返回值，调用开始调度过程在中，首先清理了中的所有子节点，然后了一个并返回是如何调度的是一个什么样的类的操作是在哪里初步看了react-dom这个包的一些源码，发现其比react包要复杂得多，react包中基本不存在跨包调用的情况，他所做的也仅仅是定义了React...

_Zhao 2019-08-23 16:55 评论0 收藏0
react解析: render的FiberRoot(三)

摘要：查看创建核心函数源码行调用函数创建是相关，不用管源码行这个指的是调用创建，下面我们将会说到对象源码行源码行函数中，首先创建了一个，然后又创建了一个，它们两者还是相互引用。感谢 yck: 剖析 React 源码解析，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得yck写的真的很棒。React 版本为 16.8.6，关于源码的...

muddyway 2019-08-26 10:42 评论0 收藏0
React源码解析ReactDOM.render源码

摘要：的创建组件，其实根源还是调用了编译之后一般写法建议用来进行源码的跟踪链接从源码角度来看创建一个组件的过程中发生了什么。 https://github.com/jimwmg/Rea... 1 React.createClass( ) var HelloWorld = React.createClass({ render : function(){ return ...

joywek 2019-08-21 17:04 评论0 收藏0
React系列之一起认识Render Prop

摘要：比如有个组件，它用来实时的获取鼠标的位置。命名空间，多个修改同一个导致的命名冲突。据说源码里面为每个组件增加路由属性就是通过该方法好了大功完成了，欢迎一起讨论学习个人博客地址意卿 1.mixins 写过react项目的应该都碰到过，不同组件复用相同代码的问题，在react早期使用React.createClass创建组件的时代，我们经常使用的是mixins来实现代码复用。比如有个组件A...

LMou 2019-08-22 14:58 评论0 收藏0
React造轮系列：对话框组件 - Dialog 思路

摘要：本文是造轮系列第二篇。实现方式事件处理跟差不多，唯一多了一步就是当点击或者的时候，如果外部有回调就需要调用对应的回调函数。本文是React造轮系列第二篇。 1.React 造轮子系列：Icon 组件思路本轮子是通过 React + TypeScript + Webpack 搭建的，至于环境的搭建这边就不在细说了，自己动手谷歌吧。当然可以参考我的源码。想阅读更多优质文章请猛戳Git...

qianfeng 2019-08-26 13:56 评论0 收藏0

发表评论

登陆后可评论

0条评论

iKcamp

男|高级讲师

我要关注我要私信

TA的文章

在tensorflow

阅读 1152·2023-04-26 02:49
NGINX_ I/O 模型

阅读 1316·2021-11-25 09:43
ASEMI超快恢复二极管MUR2060AC在高频设备中的应用

阅读 2704·2021-11-18 10:02
virtono：新增美国洛杉矶/纽约/西班牙马德里/法国巴黎/瑞典机房，1核/512M内存/15G

阅读 3059·2021-10-18 13:32
Vue学习日记（三）——Vue路由管理vue-router

阅读 1415·2019-08-30 13:54
前端面试知识点集锦

阅读 2218·2019-08-30 12:58
个人常用的软件-前端

阅读 3168·2019-08-29 14:06
浏览器 CSS Hack 收集

阅读 2288·2019-08-28 18:10

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

React源码解析之ReactDOM.render()

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

ReactDOM.render源码解析-1

react解析: render的FiberRoot(三)

React源码解析ReactDOM.render源码

React系列之一起认识Render Prop

React造轮系列：对话框组件 - Dialog 思路

发表评论

0条评论

iKcamp

男|高级讲师

TA的文章

在tensorflow

NGINX_ I/O 模型

ASEMI超快恢复二极管MUR2060AC在高频设备中的应用

virtono：新增美国洛杉矶/纽约/西班牙马德里/法国巴黎/瑞典机房，1核/512M内存/15G

Vue学习日记（三）——Vue路由管理vue-router

前端面试知识点集锦

个人常用的软件-前端

浏览器 CSS Hack 收集

最新活动