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步是 createContainer
和 new ReactDOMRoot
,先看 createContainer
的实现,
const root = createContainer(
container,
ConcurrentRoot,
...
);
container
就是传入的 document.getElementById('root')
element节点,
enableNewReconciler=false
最后返回了root
,root
是个FiberRoot
对象, uninitializedFiber
是个Fiber
对象, FiberRoot
与Fiber
进行了双向绑定。
继续看 ReactDOMRoot
做了什么
new ReactDOMRoot(root)
可见 ReactDOMRoot
继承了FiberRoot
对象,包装了一些方法,如 render
、unmount
等
我们可以看到render
方法调用了updateContainer
方法,继续看updateContainer
的实现