跳到主要内容

React 入口

一个典型的React 应用程序入口文件如下:

import React from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
return (<div>...</div>)
}

const root = createRoot(document.getElementById('root'));
root.render(App);

可以看到root.render 是react渲染的入口。

首先看 createRoot 的实现,

可以看到主要的2步是 createContainernew ReactDOMRoot,先看 createContainer的实现,

  const root = createContainer(
container,
ConcurrentRoot,
...
);

container 就是传入的 document.getElementById('root') element节点,

enableNewReconciler=false

最后返回了rootroot是个FiberRoot对象, uninitializedFiber 是个Fiber对象, FiberRootFiber进行了双向绑定。

继续看 ReactDOMRoot 做了什么

new ReactDOMRoot(root)

可见 ReactDOMRoot 继承了FiberRoot对象,包装了一些方法,如 renderunmount

我们可以看到render方法调用了updateContainer方法,继续看updateContainer的实现

Loading Comments...