react resolved: render the FiberRoot (c)

Thank yck: React source code analysis to resolve , this article is based on reading his article, his article for dismantling and processing, to my own understanding and what example, facilitate better understanding. I think yck write really great. React version 16.8.6, read about the source can be the venue to yck react parse the source code

Permanent link to this article: REACT resolved render the FiberRoot (c)

Here comes will ReactDOM.render call flow in ReactDOM the actual analysis is the code below:

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

The actual code:

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

render function

yck: ReactDOM Source 702 lines render

ReactDOM.render actual call is the following code

render ( 
    Element : Element $ React <the any >,  Container : DOMContainer,  callback : ? Function,) { // note the forceHydrate parameter is true that the service side rendering // client calls the render function, then this value is always false return legacyRenderSubtreeIntoContainer ( null, Element, Container, to false, the callback,);}

render function parameters elementare passed in the assembly, containerthe DOM node container, callback callback function. ReactDOM.render document .

legacyRenderSubtreeIntoContainer 函数

yck: ReactDOM Source 554 line legacyRenderSubtreeIntoContainer

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>, children: ReactNodeList, container: DOMContainer, forceHydrate: boolean, callback: ?Function, ) { // 初始化时，container 肯定没有 _reactRootContainer属性 let root: Root = (container._reactRootContainer: any); if (!root) { root = container._reactRootContainer = legacyCreateRootFromDOMContainer( container, // DOM容器节点 forceHydrate, // is false); // When being only say root does not exist, reactRoot create}}

containerDOM node element represents a container , creates a ReactRoot in the above code, and then mount it on a container the container, container._reactRootContaineris mounted ReactRoot properties.

// 查看_reactRootContainer
document.getElementById('app')._reactRootContainer

Creating FiberRoot Kernel

yck: ReactDOM Source 504 line legacyCreateRootFromDOMContainer

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean, ): Root { const isConcurrent = false; // 调用ReactRoot函数 创建ReactRoot, shouldHydrate是SSR相关，不用管 return new ReactRoot(container, isConcurrent, shouldHydrate); }

yck: ReactDOM Source 368 line ReactRoot

function ReactRoot(
  container: DOMContainer,
  isConcurrent: boolean, hydrate: boolean, ) { // 这个 root 指的是 FiberRoot const root = createContainer(container, isConcurrent, hydrate); this._internalRoot = root; }

Call createContainer create FiberRoot, here we will target when it comes to FiberRoot

FiberRoot

yck: ReactDOM Source 368 line createContainer

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

yck: ReactDOM Source 368 line 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; }

createFiberRoot function, first create one root: FiberRoot, and then created a uninitializedFiber: RootFiber, both of them still refer to each other.

// 查看 FiberRoot 对象
document.getElementById('app')._reactRootContainer._internalRoot

Here we look at the relationship the way FiberRoot and RootFiber, while a few have come to understand the properties to explain.

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

The above picture is only part of the property FiberRoot, and want to know more, you can view data structures FiberRoot of Oh! !