react源码解读(1)

最新推荐文章于 2025-05-26 20:31:17 发布

原创最新推荐文章于 2025-05-26 20:31:17 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细剖析了React项目启动流程，从ReactDOM.render方法入手，深入探讨了React-DOM的渲染机制，包括root对象的生成过程及其属性和方法，揭示了React组件如何最终转化为浏览器DOM节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过react的脚手架工具建立一个react项目，打开index.js，这个是项目的入口文件

就一句话，ReactDOM.render(<Router />,document.getElementById('root'))；

ReactDOM是 react-dom这个库，所以直接看react-dom这个源码，找到render方法，看看到底是个什么鬼！

找到这个传说中的render方法，继续看一下庐山真面目！

首先看一下方法的参数 element, container, callback ！

element 就是 React当中的ReactDom ，React实现了独立于浏览器的DOM系统

container 浏览器中的Dom节点

发现这个render函数其实就是执行了legacyRenderSubtreeIntoContainer这个方法，

下面来看下这个方法：

看一下这个root对象的生成过程！以下是react方法中的root对象生成的过程

legacyRenderSubtreeIntoContainer -> legacyCreateRootFromDOMContainer -> ReactRoot -> createContainer ->createFiberRoot -> createHostRootFiber -> createFiber -> FiberNode(生成一个FiberNode节点)

可以知道这个root其实是一个ReactRoot对象

再看下这个root对象有哪些属性和方法

root = {
current: uninitializedFiber, // fiberNode节点
containerInfo: containerInfo,
pendingChildren: null,

earliestPendingTime: NoWork,
latestPendingTime: NoWork,
earliestSuspendedTime: NoWork,
latestSuspendedTime: NoWork,
latestPingedTime: NoWork,

pendingCommitExpirationTime: NoWork,
finishedWork: null,
context: null,
pendingContext: null,
hydrate: hydrate,
remainingExpirationTime: NoWork,
firstBatch: null,
nextScheduledRoot: null
};

这个就是root对象，current就是 fiberNode节点