Thank yck: Analyzing React Source Parsing This article is on the basis of reading his article, to disassemble and process his article, add my own understanding and examples, so as to facilitate your understanding. Think yck It's really great. React version 16.8.6, about the source code reading, you can move to yck react source code parsing

Permanent valid links for this article: FiberRoot of react parsing render (3)

Next, we will talk about the calling process of ReactDOM.render in ReactDOM. Actually, we will analyze the following code:

ReactDOM.render(<APP />, document.getElementById('app'))

Actual code:

ReactDOM.render(React.createElement(APP, null), document.getElementById('app'));

render function

yck: ReactDOM source 702 line render

ReactDOM.render actually calls the following code

render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    // Notice that the forceHydrate parameter is rendered on the server side when true
    // This value is always false if the client calls the render function
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  }

The parameter element in the render function is the imported component, the container DOM node container, and the callback function. ReactDOM.render document.

Legacy RenderSubtree Into Container function

yck: ReactDOM source 554 lines legacy RenderSubtree Into Container

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
    // At initialization, container certainly does not have the _reactRootContainer attribute
    let root: Root = (container._reactRootContainer: any);
    if (!root) {
        root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
            container,    // DOM container node
            forceHydrate, // For false
        );
        // For the time being, when root does not exist, reactRoot is created
    }
}

Container represents the DOM element node container. In the code above, a ReactRoot is created and mounted on the container. container._reactRootContainer is the mounted ReactRoot attribute.

// View _reactRootContainer
document.getElementById('app')._reactRootContainer

Creating FiberRoot Core Functions

yck: ReactDOM source code 504 lines legacy CreateRootFromDOMContainer

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): Root {
  const isConcurrent = false;
  // Call ReactRoot function to create ReactRoot, shouldHydrate is SSR related, no need to care
  return new ReactRoot(container, isConcurrent, shouldHydrate);
}

yck: ReactDOM source 368 lines ReactRoot

function ReactRoot(
  container: DOMContainer,
  isConcurrent: boolean,
  hydrate: boolean,
) {
  // This root refers to FiberRoot
  const root = createContainer(container, isConcurrent, hydrate);
  this._internalRoot = root;
}

Calling createContainer to create FiberRoot, we'll talk about the FiberRoot object next

FiberRoot

yck: ReactDOM source 368 lines createContainer

export function createContainer(
  containerInfo: Container,
  isConcurrent: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isConcurrent, hydrate);
}

yck: ReactDOM source 368 lines createFiberRoot

function createFiberRoot(
  containerInfo: any,
  isConcurrent: boolean,
  hydrate: boolean,
): FiberRoot {
  const root: FiberRoot = (new FiberRootNode(containerInfo, hydrate): any);
  const uninitializedFiber = createHostRootFiber(isConcurrent);
  root.current = uninitializedFiber;
  uninitializedFiber.stateNode = root;

  return root;
}

In the createFiberRoot function, we first create a root: FiberRoot, and then create a uninitialized Fiber: RootFiber, which refers to each other.

// View FiberRoot objects
document.getElementById('app')._reactRootContainer._internalRoot

Let's talk about the relationship between FiberRoot and RootFiber by the way, and explain a few attributes that we have to understand.

ReactDom.render(
  ()=> (
    <div>
      <div></div>
      <div></div>
    </div>
  ), 
  document.querySelector('#root')
)

There are only some attributes of FiberRoot in the picture above. For more information, you can see them. Data structure of FiberRoot Oh

More:

React.createElement(1)

React.Children(2)

Reference resources:

yck: Anatomizing React Source Code

Jokcy's React Source Parsing: react.jokcy.me/

ps: By the way, push your personal public number: Yopai. If you are interested, you can pay attention to it. You can update it periodically every week. Sharing can increase the happiness of the world.