Hello everyone, I haven't met you in the form of technical articles for a long time. Recently, I am using React 18 for web projects, so I took the time to study the source code of React 18. Next, I want to do a series of source code analysis of React 18. The series of articles will discuss the technical implementation of the new version of React with you in the form of "demo + source code". Welcome to like/follow/pait bricks and make progress together
This series will use the React v18.1.0 version by default, and the default operating environment is the browser. Readers can download the React source code from GitHub, please pay attention
In this chapter we'll explore what happens when a React project is initialized :
Demo
We use the official scaffolding create-react-app to create a React project, and then modify the index.js file to the following code
import { createRoot } from 'react-dom/client';
function App() {
return <h1>Hello dan!!!</h1>
}
const root = createRoot(document.getElementById('root'))
root.render(<App></App>) Execute npm start this script, if you see this very simple (ugly) page displayed, it proves that the project is running normally
function analysis
From the Demo, we can see that the entire project first creates a root object through the createRoot function, and then passes the root render method App This component is rendered to the web page
createRoot
Let's see first createRoot what this method does. This method comes from the react-dom package. We can find the specific implementation of createRoot packages / react-dom / src / client / ReactDOMRoot.js in the source code---5997194afa447afc465e453a44b41193--- ( I made some conditional judgments about the environment in ReactDOM.js, which can be ignored first )
createRoot函数有container options ， options是可选参数，本章为了简单起见先不讨论；
This function roughly implements the following functions:
- Create container object
FiberRootNode - event delegation
- Returns
ReactDOMRootFiberRootNode
// 删除了一些干扰逻辑之后，createRoot 函数大致如下所示
function createRoot(
container: Element | DocumentFragment,
options?: CreateRootOptions,
): RootType {
let isStrictMode = false;
let concurrentUpdatesByDefaultOverride = false;
let identifierPrefix = '';
let onRecoverableError = defaultOnRecoverableError;
let transitionCallbacks = null;
// 创建容器对象 `FiberRootNode`
const root = createContainer(
container,
ConcurrentRoot,
null,
isStrictMode,
concurrentUpdatesByDefaultOverride,
identifierPrefix,
onRecoverableError,
transitionCallbacks,
);
markContainerAsRoot(root.current, container);
// 事件监听处理
const rootContainerElement: Document | Element | DocumentFragment =
container.nodeType === COMMENT_NODE
? (container.parentNode: any)
: container;
listenToAllSupportedEvents(rootContainerElement);
// 根据容器对象 `root` 返回 `ReactDOMRoot` 对象
return new ReactDOMRoot(root);
} createContainer function completes the work of creating the container object FiberRootNode .
This method comes from react-reconciler this package can be found in packages / react-reconciler / src / ReactFiberReconciler.old.js , and the content of this method is also very simple, directly calling the same level ReactFiberRoot.old.js file createFiberRoot method to create and return a FiberRootNode object, also called Fiber 根结点 .
Note: There is a difference between ---b65da4ed7320143b43fe549cabe0193c Fiber 根结点 and Fiber 节点 . For details, see the respective definition functions below.
A concept called Fiber is introduced here. At present, we only need to have a preliminary impression of it: Fiber nodes are used to store React component node information (including DOM nodes, component properties/state/effect, etc.). This can be simply understood as a JS object that stores information, which will be described in detail in subsequent chapters
function createFiberRoot(containerInfo, tag, hydrate, initialChildren, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride,
identifierPrefix, onRecoverableError, transitionCallbacks) {
// 创建 FiberRootNode 对象
// tag 值为 ConcurrentRoot，定义在 packages/react-reconciler/src/ReactRootTags.js 文件中；
// tag === ConcurrentRoot === 1 ，表示 “根节点”
var root = new FiberRootNode(containerInfo, tag, hydrate, identifierPrefix, onRecoverableError);
// 建议看到这里先别着急看后面的代码，先看看下面 FiberRootNode 的定义和构造函数
// 分割线 ************** 分割线 ************** 分割线 ************** 分割线 **************
// 看完 FiberRootNode 的定义之后，接下来马上要创建 Fiber 对象
// createHostRootFiber 会调用 packages/react-reconciler/src/ReactFiber.old.js 文件中的 createFiber 方法创建一个 `Fiber HostRoot节点`
// `Fiber HostRoot节点` 就是一个 Fiber 对象，只是他的 Tag 等于 3，代表 `HostRoot`
var uninitializedFiber = createHostRootFiber(tag, isStrictMode);
// 把 `Fiber 根结点` 的 current 属性指向刚创建的 `Fiber HostRoot节点`
root.current = uninitializedFiber;
// `Fiber HostRoot节点` 的 stateNode 属性指向 `Fiber 根结点`
uninitializedFiber.stateNode = root;
// cache 相关的可先忽略
var initialCache = createCache();
retainCache(initialCache);
root.pooledCache = initialCache;
retainCache(initialCache);
// 初始化一个 state 对象
var initialState = {
element: initialChildren,
isDehydrated: hydrate,
cache: initialCache,
transitions: null
};
uninitializedFiber.memoizedState = initialState;
// 初始化 `Fiber HostRoot节点` 的更新队列
// 给 Fiber 的 updateQueue 属性赋值
/**
var queue = {
baseState: fiber.memoizedState,
firstBaseUpdate: null,
lastBaseUpdate: null,
shared: {
pending: null,
interleaved: null,
lanes: NoLanes
},
effects: null
};
fiber.updateQueue = queue;
**/
initializeUpdateQueue(uninitializedFiber);
// 返回 `Fiber 根结点`
return root;
} Definition of FiberRootNode :
A constructor, the information of Fiber 根节点 is stored in the object, you can pay attention to the following first
- tag: identifies the node type, here is
ConcurrentRoot - containerInfo: DOM information of
Fiber 根节点, indicating that the current React application is rendered inside this DOM node - current: save the current Fiber tree (will be covered in subsequent chapters)
Other attributes can be roughly scanned first, the important thing is that the follow-up will be introduced one by one
// 在`packages/react-reconciler/src/ReactFiberRoot.old.js`文件中 // FiberRootNode 构造函数 function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix, onRecoverableError) { this.tag = tag; this.containerInfo = containerInfo; this.pendingChildren = null; this.current = null; .... // 省略其他属性初始化 ....
Definition of Fiber Nodes
function FiberNode(
tag: WorkTag,
pendingProps: mixed,
key: null | string,
mode: TypeOfMode,
) {
// tag 表示 Fiber 类型
// packages/react-reconciler/src/ReactWorkTags.js 中定义
this.tag = tag;
// 写在 jsx 组件上的 key 属性
this.key = key;
// createElement的第一个参数，ReactElement 上的 type
this.elementType = null;
// 暂时可认为与 elementType 基本一致
this.type = null;
// fiber 节点对应的 DOM 节点
this.stateNode = null;
// Fiber 结构
// 指向父节点
this.return = null;
// 指向第一个子节点
this.child = null;
// 指向兄弟节点
this.sibling = null;
// 一般如果没有兄弟节点的话是 0 当某个父节点下的子节点是数组类型的时候会给每个子节点一个 index
this.index = 0;
// 保存 ref 属性对象
this.ref = null;
// 新的 props 对象
this.pendingProps = pendingProps;
// 现有的 props 对象
this.memoizedProps = null;
// 保存更新对象的队列
this.updateQueue = null;
// 现有的 state 对象
this.memoizedState = null;
// 依赖对象
this.dependencies = null;
// 渲染方式
// React 18 默认是 `ConcurrentMode`: 0b000001
// packages/react-reconciler/src/ReactTypeOfMode.js 文件中定义
this.mode = mode;
// Effects
// effect 的 Flag，表明当前的 effect 是`替换`/ `更新` / `删除` 等操作
// packages/react-reconciler/src/ReactFiberFlags.js
this.flags = NoFlags;
// 子树的 Flag 合集
this.subtreeFlags = NoFlags;
// 需要删除的 fiber 节点
this.deletions = null;
// 更新渲染调度优先级相关
// packages/react-reconciler/src/ReactFiberLane.old.js 文件中定义
this.lanes = NoLanes;
this.childLanes = NoLanes;
// current 树和 workInprogress 树之间的相互引用
// current 树就是当前的 Fiber 树
// workInprogress 树 就是正在更新的 Fiber 树
// 后续讲到组件更新会详细讲到
this.alternate = null;
if (enableProfilerTimer) {
// 。。。 省略
}
} To summarize: createContainer method creates and returns the ---e930d2a72bedc39f1f401da7a39cc6b7--- object by createFiberRoot Fiber 根节点 : FiberRootNode . At the same time, the current property of the object points to a Fiber HostRoot节点 .
markContainerAsRoot method adds an attribute __reactContainer${randomKey} on the container DOM node, and the value of the attribute points to Fiber HostRoot节点 . to indicate that the DOM node is the container node of the current React application.
listenToAllSupportedEvents function completes the work of event delegation processing
In the packages/react-dom/src/events/DOMPluginEventSystem.js file, the listenToAllSupportedEvents function receives an input parameter: the container DOM node (that is, createRoot the first parameter of the function)
The general principle is: React 18 delegates all events to this node. Once the native event is triggered, this node will trigger the event callback function on the corresponding fiber node according to the event type and priority. At present, you can learn about React synthetic events first, and the event mechanism will be explained in detail in subsequent chapters.
export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
if (!(rootContainerElement: any)[listeningMarker]) {
(rootContainerElement: any)[listeningMarker] = true;
// allNativeEvents 是一个集合，保存了 React 支持的所有事件
// Set(81) {'abort', 'auxclick', 'cancel', 'canplay', 'canplaythrough', …}
allNativeEvents.forEach(domEventName => {
// 这里最重要的函数就是 `listenToNativeEvent`
// 用于将事件绑定到容器的 DOM 节点
// 下面会根据是否响应捕获阶段分逻辑处理（可先忽略）
// selectionchange 事件也单独处理（可先忽略）
// listenToNativeEvent 事件内部调用 addTrappedEventListener 函数
if (domEventName !== 'selectionchange') {
if (!nonDelegatedEvents.has(domEventName)) {
listenToNativeEvent(domEventName, false, rootContainerElement);
}
listenToNativeEvent(domEventName, true, rootContainerElement);
}
});
// 。。。省略 selectionchange 逻辑
}
} addTrappedEventListener The main implementation of the function: get the corresponding priority according to the event, different priorities are in 容器 DOM节点 Register different event callback functions
function addTrappedEventListener(targetContainer, domEventName, eventSystemFlags, isCapturePhaseListener, isDeferredListenerForLegacyFBSupport) {
// packages/react-reconciler/src/ReactEventPriorities.js 文件保存事件优先级的定义
// createEventListenerWrapperWithPriority逻辑 ：
// 1. 调用`getEventPriority` 函数实现从`事件名`到 `事件优先级` 的转化
// 2. 根据 `事件优先级` eventPriority 匹配不同的回调函数：（dispatchDiscreteEvent，dispatchContinuousEvent， dispatchEvent）
// 3. 返回事件回调函数，赋值给 listener
var listener = createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags); // If passive option is not supported, then the event will be
var isPassiveListener = undefined;
if (passiveBrowserEventsSupported) {
// 逻辑省略
}
targetContainer = targetContainer;
var unsubscribeListener;
// 事件绑定逻辑：
// 调用 addEventCaptureListener(WithPassiveFlag) / addEventBubbleListener((WithPassiveFlag)) 函数进行事件绑定，
// 内部调用原生方法 dom.addEventListener，实现事件绑定
if (isCapturePhaseListener) {
if (isPassiveListener !== undefined) {
unsubscribeListener = addEventCaptureListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener);
} else {
unsubscribeListener = addEventCaptureListener(targetContainer, domEventName, listener);
}
} else {
if (isPassiveListener !== undefined) {
unsubscribeListener = addEventBubbleListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener);
} else {
unsubscribeListener = addEventBubbleListener(targetContainer, domEventName, listener);
}
}
} To sum up: listenToAllSupportedEvents The function registers different callback functions for 容器 DOM节点 --- according to different event types, and all events of subcomponents are distributed and triggered by this node
Returns the ReactDOMRoot object
Instantiate the ReactDOMRoot object, save the Fiber HostRoot节点 constructor in the object's _internalRoot attribute
// ReactDOMRoot 构造函数
// 比较简单，不解释
function ReactDOMRoot(internalRoot: FiberRoot) {
this._internalRoot = internalRoot;
} createRoot function finally returns the ReactDOMRoot object, which completes all the work of the entire function. Next, call the ReactDOMRoot object's render method for rendering
render
render method is implemented in the packages/react-dom/src/client/ReactDOMRoot.js file, the input parameter is a subcomponent, and the function internally calls the updateContainer method to render the subcomponent (App)
ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function(
children: ReactNodeList,
): void {
const root = this._internalRoot;
if (root === null) {
throw new Error('Cannot update an unmounted root.');
}
const container = root.containerInfo;
// 重要步骤，重点分析
updateContainer(children, root, null, null);
}; updateContainer function is defined in the packages/react-reconciler/src/ReactFiberReconciler.old.js file, which mainly implements the scheduling task of the container
Lane is used to represent the priority of tasks in React. At present, only a general understanding is needed, and it will be explained in detail later.
schedule is an independent task scheduling module, which is currently only used inside React. Many APIs are still in an unstable state and may be provided to external projects in the future; this module will also be explained separately in the future, so stay tuned
// 删除一些干扰逻辑之后的 `updateContainer` 函数
export function updateContainer(
element: ReactNodeList,
container: OpaqueRoot,
parentComponent: ?React$Component<any, any>,
callback: ?Function,
): Lane {
// 当前的 Fiber 树
const current = container.current;
// 当前事件时间，调用 `now` 函数
const eventTime = requestEventTime();
// 获取当前更新的 lane （任务调度优先级）
const lane = requestUpdateLane(current);
// 获取上下文
const context = getContextForSubtree(parentComponent);
if (container.context === null) {
// 将 FiberRootNode 的 context 属性指向 context
container.context = context;
} else {
// 将 FiberRootNode 新的 context 属性指向 context
container.pendingContext = context;
}
// 创建一个`更新对象`:update
/* var update = {
eventTime: eventTime, // 事件时间
lane: lane, // 调度优先级
tag: UpdateState, // 标识是 update / delete / ForceUpdate / ...
payload: null, // payload，保存 { element: React.element }
callback: null, // 回调函数
next: null // 指向下一个 update
};
*/
const update = createUpdate(eventTime, lane);
// 设置更新对象的 paylaod 属性
update.payload = {element};
callback = callback === undefined ? null : callback;
if (callback !== null) {
update.callback = callback;
}
// 把`更新对象` enqueue 到`更新队列`
// 后续在将组件更新的时候会细讲，这块还是比较重要的，目前可以大概了解
enqueueUpdate(current, update, lane);
// scheduleUpdateOnFiber 利用到 scheduler 这个包来进行任务调度
// 通过将渲染方法 performConcurrentWorkOnRoot 注册到 scheduler 的调度机制中
// scheduler 会根据任务优先级执行这个渲染方法，将 APP 组件最终渲染到页面上
const root = scheduleUpdateOnFiber(current, lane, eventTime);
if (root !== null) {
entangleTransitions(root, current, lane);
}
return lane;
}flow chart
At this point, the initialization process of the entire React project is completed. In order to ensure that the content of this chapter is simple enough, many details have not been explained in depth. However, I believe that after reading this chapter, the reader will have a certain understanding of the entire initialization process. In subsequent chapters, we'll dive deeper into other phases of a React project. At the same time, readers are also welcome to leave a message below to communicate with me and make progress together
In the end, I hope that the epidemic will end as soon as possible. Come on, China and the world! ! !
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。