「React源码分析」七. React DOM之Root根节点操作分析

2021SC@SDUSC

ReactDOM Root节点的相关操作源码分析

Root节点是ReactDOM树中的基本组成部分，对于每个Root节点，有render()方法使其渲染或更新，以及unmount()方法将该节点从ReactDOM树上卸载。
节点render()的渲染更新的具体步骤则是由react-conciler来协调完成的。因此在ReactDOM中，只定义了一个Root节点在调用被render()时，需要作什么样的检查以及相应的错误处理与提示。随后再调用react-conciler完成具体的渲染更新操作。
而unmount()则是将Root节点从ReactDOM树中卸载出去，同样需要作出相关的检查、更新节点状态，并最后在ReactDOM树中取消标记其为Root节点。
此外，ReactDOMRoot.js中还提供了createRoot()方法来创建ReactDOM树的Root节点。
相关操作的源代码在packages\react-dom\src\client\ReactDOMRoot.js中定义。

ReactDOMRoot.prototype.render

ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   
  const root = this._internalRoot;
  if (root === null) {
   
    throw new Error('Cannot update an unmounted root.');
  }

  if (__DEV__) {
   
    if (typeof arguments[1] === 'function') {
   
      console.error(
        'render(...): does not support the second callback argument. ' +
          'To execute a side effect after rendering, declare it in a component body with useEffect().',
      );
    }
    const container = root.containerInfo;

    if (container.nodeType !== COMMENT_NODE