React 源码解析- render 入口篇

render() 方法是 react 应用的入口方法,所有的 jsx 渲染 hooks 挂载和执行等,都在这个里面,本文将会通过一个小小的案例,来进行讲解。


举个🌰

const root = ReactDOM.createRoot(document.getElementById('root'));  
root.render(  
    <App />  
);

function App() {  
    return (  
    <section>hello</section>  
);  
}

ReactDOM.createRoot

React 源码解析- render 入口篇

①处的标记,isValidContainer 判断传入的 dom 节点是否是 合法的挂载对象

React 源码解析- render 入口篇

如普通的 element 节点,document 节点,文档片段节点等,都是合法的挂载对象。NodeType 属性详见MDN Node:nodeType 属性

②处的标记,warnIfReactDOMContainerInDEV 判断,若 container 作为 body 或已经被作为 root 使用过,则在 dev 环境发出警告,④处的标记,markContainerAsRoot 则对 container 进行标记为 root 节点,如果再次使用,则发出警告

React 源码解析- render 入口篇
这里我们把 warnIfReactDOMContainerInDEVmarkContainerAsRoot 结合起来看,markContainerAsRoot 先是给 node 添加一个 internalContainerInstanceKey 属性,然后在 warnIfReactDOMContainerInDEV 中判断是否有此属性,如果有,则是已经被作为 root 使用过,则在 dev 环境发出警告。

React 源码解析- render 入口篇

③处的标记,调用 createContainer 创建一个 FiberRoot 类型的节点;

createContainer 代码如下:
React 源码解析- render 入口篇

下面我们继续看createFiberRoot

React 源码解析- render 入口篇
其实就是调用 FiberRootNode 赋值给 root, 最后返回给上层调用函数

⑤处的标记,listenToAllSupportedEvents 主要是挂载事件

⑥处的标记,new ReactDOMRoot 主要是返回一个 ReactDOMRoot 的实例,render() 方法就是这个类的一个实例

React 源码解析- render 入口篇

new ReactDOMRoot 传入的参数就是在 createContainer 创建的 FiberRoot ,即 root(FiberRootNode 是整个应用的根节点),在 ReactDOMRoot 构造函数种赋值给 this._internalRoot

至此 createRoot 方法大致流程已经分析完了,其实主要就是创建整个应用的根节点 FiberRootNode,以及创建 所在组件树的根节点 FiberNode。

ReactDOMRoot

ReactDOMRoot 的实现很简单,就是将创建的 FiberRootNode 类型的节点放在实例的 _internalRoot 属性上。然后在 ReactDOMRoot 的原型链上添加 renderunmount 两个方法。

React 源码解析- render 入口篇

  • 在 render 方法中,获取 root 值,然后调用 updateContainer 进行更新;
  • 在 unmount 方法中,把 _internalRoot 清空,然后调用 unmarkContainerAsRoot,取消标记,这里和 createRoot 中的 warnIfReactDOMContainerInDEVmarkContainerAsRoot 前后相呼应起来。
export function unmarkContainerAsRoot(node: Container): void {
  node[internalContainerInstanceKey] = null;
}

render

执行完 ReactDOM.createRoot 后将会执行 root.render(<App />) ,下面我们先来看下源码,如图:

React 源码解析- render 入口篇

其实就是在 ReactDOMRoot.prototype 上挂了个 render 函数,主要也就是两行代码:

  • 标记 ① 处就是把在 createRoot 中 赋值的 _internalRoot 变量赋值给 root 变量;
  • 标记 ② 处调用了 updateContainer 函数,我们接下来将会主要分析这个函数。

下面我们主要分析一下 updateContainer 这个函数。

React 源码解析- render 入口篇

  1. const current = container.current 获取 FiberRootNode.current 现在指向到当前的 fiber 树,若是初次执行,current 树只有 hostFiber 节点,没有其他的;

  2. const lane = requestUpdateLane(current), requestUpdateLane 创建了 lane,获取工作的优先级;

  3. const update = createUpdate(lane),这里结合 lane 优先级,创建 update 对象,,一个 update 对象意味着一个更新;

    React 源码解析- render 入口篇

  4. update.payload = {element}, 可以看到,把 element (react 的 ReactNodeList)当做荷载放到了 update 里面去了;

  5. const root = enqueueUpdate(current, update, lane),创建 update 对象入队,后续会继续讲解这部分流程;

  6. scheduleUpdateOnFiber(root, current, lane) 这个方法中牵涉到的逻辑也是比较多,由于篇幅问题,会在后续进行详细讲解。

入口方法 render() 我们就大致讲到这里,不过还有很多只是粗略的提了一下,在后续的文章种会继续讲讲解。

原文链接:https://juejin.cn/post/7356080597599977510 作者:feelingHy

(0)
上一篇 2024年4月11日 上午10:16
下一篇 2024年4月11日 上午10:26

相关推荐

发表回复

登录后才能评论