render() 方法是 react 应用的入口方法,所有的 jsx 渲染 hooks 挂载和执行等,都在这个里面,本文将会通过一个小小的案例,来进行讲解。
举个🌰
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
function App() {
return (
<section>hello</section>
);
}
ReactDOM.createRoot
①处的标记,isValidContainer 判断传入的 dom 节点是否是 合法的挂载对象
如普通的 element 节点,document 节点,文档片段节点等,都是合法的挂载对象。NodeType 属性详见MDN Node:nodeType 属性
②处的标记,warnIfReactDOMContainerInDEV 判断,若 container 作为 body 或已经被作为 root 使用过,则在 dev 环境发出警告,④处的标记,markContainerAsRoot 则对 container 进行标记为 root 节点,如果再次使用,则发出警告
这里我们把 warnIfReactDOMContainerInDEV
和 markContainerAsRoot
结合起来看,markContainerAsRoot 先是给 node 添加一个 internalContainerInstanceKey 属性,然后在 warnIfReactDOMContainerInDEV 中判断是否有此属性,如果有,则是已经被作为 root 使用过,则在 dev 环境发出警告。
③处的标记,调用 createContainer
创建一个 FiberRoot
类型的节点;
createContainer 代码如下:
下面我们继续看createFiberRoot
:
其实就是调用 FiberRootNode
赋值给 root, 最后返回给上层调用函数
⑤处的标记,listenToAllSupportedEvents
主要是挂载事件
⑥处的标记,new ReactDOMRoot
主要是返回一个 ReactDOMRoot 的实例,render() 方法就是这个类的一个实例
new ReactDOMRoot
传入的参数就是在 createContainer
创建的 FiberRoot
,即 root(FiberRootNode 是整个应用的根节点),在 ReactDOMRoot 构造函数种赋值给 this._internalRoot
至此 createRoot 方法大致流程已经分析完了,其实主要就是创建整个应用的根节点 FiberRootNode,以及创建 所在组件树的根节点 FiberNode。
ReactDOMRoot
ReactDOMRoot 的实现很简单,就是将创建的 FiberRootNode 类型的节点放在实例的 _internalRoot 属性上。然后在 ReactDOMRoot 的原型链上添加 render
和 unmount
两个方法。
- 在 render 方法中,获取 root 值,然后调用
updateContainer
进行更新; - 在 unmount 方法中,把 _internalRoot 清空,然后调用
unmarkContainerAsRoot
,取消标记,这里和createRoot
中的warnIfReactDOMContainerInDEV
和markContainerAsRoot
前后相呼应起来。
export function unmarkContainerAsRoot(node: Container): void {
node[internalContainerInstanceKey] = null;
}
render
执行完 ReactDOM.createRoot 后将会执行 root.render(<App />)
,下面我们先来看下源码,如图:
其实就是在 ReactDOMRoot.prototype 上挂了个 render 函数,主要也就是两行代码:
- 标记 ① 处就是把在
createRoot
中 赋值的 _internalRoot 变量赋值给 root 变量; - 标记 ② 处调用了
updateContainer
函数,我们接下来将会主要分析这个函数。
下面我们主要分析一下 updateContainer
这个函数。
-
const current = container.current
获取 FiberRootNode.current 现在指向到当前的 fiber 树,若是初次执行,current 树只有 hostFiber 节点,没有其他的; -
const lane = requestUpdateLane(current)
, requestUpdateLane 创建了 lane,获取工作的优先级; -
const update = createUpdate(lane)
,这里结合 lane 优先级,创建 update 对象,,一个 update 对象意味着一个更新; -
update.payload = {element}
, 可以看到,把 element (react 的ReactNodeList
)当做荷载放到了 update 里面去了; -
const root = enqueueUpdate(current, update, lane)
,创建 update 对象入队,后续会继续讲解这部分流程; -
scheduleUpdateOnFiber(root, current, lane)
这个方法中牵涉到的逻辑也是比较多,由于篇幅问题,会在后续进行详细讲解。
入口方法 render()
我们就大致讲到这里,不过还有很多只是粗略的提了一下,在后续的文章种会继续讲讲解。
原文链接:https://juejin.cn/post/7356080597599977510 作者:feelingHy