React18源码-02createRoot中发生了什么

[1mikasa1]

/**

• 生成一个根节点
• @param {documentElement} container
• @param {
• identifierPrefix：根节点唯一Id，用于存在多个根节点的场景
• onRecoverableError:当React 自动从错误中恢复时调用的可选回调。
• } options

• */

  function createRoot(container, options) { // 判断是否为一个合法的dom节点（必须是元素节点、comment节点或DocumentFragment 节点，文本节点不行） if (!isValidContainer(container)) { throw new Error('createRoot(...): Target container is not a DOM element.'); }

  warnIfReactDOMContainerInDEV(container); var isStrictMode = false; var concurrentUpdatesByDefaultOverride = false; var identifierPrefix = ''; var onRecoverableError = defaultOnRecoverableError; var transitionCallbacks = null;

  if (options !== null && options !== undefined) { // 给局部变量赋值 } 生成FiberRootNode实例对象 （整个应用的根节点） var root = createContainer(container, ConcurrentRoot, null, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError); 将container元素的__reactContainer$属性指向fiberRoot markContainerAsRoot(root.current, container); var rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container; 在根节点上添加事件监听，做事件委托 listenToAllSupportedEvents(rootContainerElement); 将FiberRootNode实例对象作为一个新对象的_internalRoot属性返回 return new ReactDOMRoot(root); }

[1mikasa1]

生成一个reactrootFiber createContainer

/**

• @param dom元素 containerInfo
• @param {number} { tag (开发环境下写死为1)
• @param {null} hydrationCallbacks
• @param {boolean} isStrictMode
• @param {false} concurrentUpdatesByDefaultOverride
• @param {string} identifierPrefix 唯一id
• @param {() => void} onRecoverableError 从错误中恢复的回调
• @param 未知 transitionCallbacks */ function createContainer(containerInfo, tag, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, transitionCallbacks) { var hydrate = false; var initialChildren = null; return createFiberRoot(containerInfo, tag, hydrate, initialChildren, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError); }

[1mikasa1]

createFiberRoot

/**

• 生成fiber树，初始化更新队列
• @param {documentElement} containerInfo
• @param {number} tag 1
• @param {false} hydrate
• @param {null} initialChildren
• @param {null} hydrationCallbacks
• @param {false} isStrictMode
• @param {false} concurrentUpdatesByDefaultOverride
• @param {string} identifierPrefix 唯一id
• @param {() => void} onRecoverableError 从错误中恢复的回调
• @param 未知 transitionCallbacks */

function createFiberRoot(containerInfo, tag, hydrate, initialChildren, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride,identifierPrefix, onRecoverableError, transitionCallbacks) { // 生成一颗fiber树，对同一个元素重复调用render时不会重复生成 var root = new FiberRootNode(containerInfo, tag, hydrate, identifierPrefix, onRecoverableError);

1.生成rootFiber实例 rootFiber是所在组件树的根节点,rootFiber在每次重新渲染的时候会重新构建。 2.在应用中当多次调用ReactDOM.render渲染不同的组件树的时候，它们会拥有不同的rootFiber，但整个应用的根节点只有一个fiberRootNode。fiberRootNode的current会指向当前页面上已渲染内容对应Fiber树，即current Fiber树。 var uninitializedFiber = createHostRootFiber(tag, isStrictMode); root.current = uninitializedFiber; uninitializedFiber.stateNode = root;

{ var _initialState = { element: initialChildren, isDehydrated: hydrate, cache: null, // not enabled yet transitions: null }; uninitializedFiber.memoizedState = _initialState; }

初始化更新队列 initializeUpdateQueue(uninitializedFiber); return root; }

[1mikasa1]

initializeUpdateQueue

function initializeUpdateQueue(fiber) { var queue = { baseState: fiber.memoizedState, // 当前state状态 firstBaseUpdate: null, // 队列的第一个元素 lastBaseUpdate: null, // 队列的最后一个元素 shared: { pending: null, interleaved: null, lanes: NoLanes }, effects: null }; fiber.updateQueue = queue; }

[1mikasa1]

在根节点上做事件委托

监听所有浏览器支持的事件 function listenToAllSupportedEvents(rootContainerElement) { 如果没有则进行绑定 if (!rootContainerElement[listeningMarker]) { rootContainerElement[listeningMarker] = true; allNativeEvents.forEach(function (domEventName) { if (domEventName !== 'selectionchange') { if (!nonDelegatedEvents.has(domEventName)) { listenToNativeEvent(domEventName, false, rootContainerElement); } listenToNativeEvent(domEventName, true, rootContainerElement); } }); ... } }

[1mikasa1]

所有支持的事件做一个优先级分类，并赋予这些事件不同的优先级： function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags) { // 根据不同的事件做优先级分类 var eventPriority = getEventPriority(domEventName); var listenerWrapper; //根据优先级分类，设置事件触发时的优先级,三类事件优先级逐步降低 switch (eventPriority) { // click，blur,focus,submit,tuchStart 等，优先级最高 case DiscreteEventPriority: listenerWrapper = dispatchDiscreteEvent; break; // 连续事件，例如：滚动事件，拖动事件等，连续触发的事件 case ContinuousEventPriority: listenerWrapper = dispatchContinuousEvent; break; // 默认事件 case DefaultEventPriority: default: listenerWrapper = dispatchEvent; break; } return listenerWrapper.bind(null, domEventName, eventSystemFlags, targetContainer); }