React commit源码分析详解_React_

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js function commitRoot(root) { const renderPriorityLevel = getCurrentPriorityLevel(); runWithPriority( ImmediateSchedulerPriority, commitRootImpl.bind(null, root, renderPriorityLevel), ); return null; }

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js function commitRootImpl(root, renderPriorityLevel) { // ... const finishedWork = root.finishedWork; const lanes = root.finishedLanes; // ... // 获取 effectList 链表 let firstEffect; if (finishedWork.flags > PerformedWork) { // 如果 root 上有 effect，则将其添加进 effectList 链表中 if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { // 如果 root 上没有 effect，直接使用 finishedWork.firstEffect 作用链表头节点 firstEffect = finishedWork.firstEffect; } if (firstEffect !== null) { // ... // 第一次遍历，执行 commitBeforeMutationEffects nextEffect = firstEffect; do { if (__DEV__) { invokeGuardedCallback(null, commitBeforeMutationEffects, null); // ... } else { try { commitBeforeMutationEffects(); } catch (error) { // ... } } } while (nextEffect !== null); // ... // 第二次遍历，执行 commitMutationEffects nextEffect = firstEffect; do { if (__DEV__) { invokeGuardedCallback( null, commitMutationEffects, null, root, renderPriorityLevel, ); // ... } else { try { commitMutationEffects(root, renderPriorityLevel); } catch (error) { // ... } } } while (nextEffect !== null); // 第三次遍历，执行 commitLayoutEffects nextEffect = firstEffect; do { if (__DEV__) { invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes); // ... } else { try { commitLayoutEffects(root, lanes); } catch (error) { // ... } } } while (nextEffect !== null); nextEffect = null; // ... } else { // 没有任何副作用 root.current = finishedWork; if (enableProfilerTimer) { recordCommitTime(); } } // ... }

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js function commitBeforeMutationEffects() { while (nextEffect !== null) { // ... const flags = nextEffect.flags; if ((flags & Snapshot) !== NoFlags) { // 如果当前 fiber 节点有 flags 副作用 commitBeforeMutationEffectOnFiber(current, nextEffect); // ... } // ... nextEffect = nextEffect.nextEffect; } } 

// packages/react-reconciler/src/ReactFiberCommitWork.old.js function commitBeforeMutationLifeCycles( current: Fiber | null, finishedWork: Fiber, ): void { switch (finishedWork.tag) { case FunctionComponent: case ForwardRef: case SimpleMemoComponent: case Block: { return; } case ClassComponent: { if (finishedWork.flags & Snapshot) { if (current !== null) { // 非首次加载的情况下 // 获取上一次的 props 和 state const prevProps = current.memoizedProps; const prevState = current.memoizedState; // 获取当前 class 组件实例 const instance = finishedWork.stateNode; // ... // 调用 getSnapshotBeforeUpdate 生命周期方法 const snapshot = instance.getSnapshotBeforeUpdate( finishedWork.elementType === finishedWork.type ? prevProps : resolveDefaultProps(finishedWork.type, prevProps), prevState, ); // ... // 将生成的 snapshot 保存到 instance.__reactInternalSnapshotBeforeUpdate 上，供 DidUpdate 生命周期使用 instance.__reactInternalSnapshotBeforeUpdate = snapshot; } } return; } // ... } }

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js function commitMutationEffects( root: FiberRoot, renderPriorityLevel: ReactPriorityLevel, ) { // 对 effectList 进行遍历 while (nextEffect !== null) { setCurrentDebugFiberInDEV(nextEffect); const flags = nextEffect.flags; // ContentReset：重置文本节点 if (flags & ContentReset) { commitResetTextContent(nextEffect); } // Ref：commitDetachRef 更新 ref 的 current 值 if (flags & Ref) { const current = nextEffect.alternate; if (current !== null) { commitDetachRef(current); } if (enableScopeAPI) { if (nextEffect.tag === ScopeComponent) { commitAttachRef(nextEffect); } } } // 执行更新、插入、删除操作 const primaryFlags = flags & (Placement | Update | Deletion | Hydrating); switch (primaryFlags) { case Placement: { // 插入 commitPlacement(nextEffect); nextEffect.flags &= ~Placement; break; } case PlacementAndUpdate: { // 插入并更新 // 插入 commitPlacement(nextEffect); nextEffect.flags &= ~Placement; // 更新 const current = nextEffect.alternate; commitWork(current, nextEffect); break; } // ... case Update: { // 更新 const current = nextEffect.alternate; commitWork(current, nextEffect); break; } case Deletion: { // 删除 commitDeletion(root, nextEffect, renderPriorityLevel); break; } } resetCurrentDebugFiberInDEV(); nextEffect = nextEffect.nextEffect; } }

// packages/react-reconciler/src/ReactFiberCommitWork.old.js function commitPlacement(finishedWork: Fiber): void { if (!supportsMutation) { return; } // 获取当前 fiber 的父 fiber const parentFiber = getHostParentFiber(finishedWork); let parent; let isContainer; // 获取父 fiber 对应真实 dom 节点 const parentStateNode = parentFiber.stateNode; // 获取父 fiber 对应的 dom 是否可以作为 container case HostComponent: parent = parentStateNode; isContainer = false; break; case HostRoot: parent = parentStateNode.containerInfo; isContainer = true; break; case HostPortal: parent = parentStateNode.containerInfo; isContainer = true; break; case FundamentalComponent: if (enableFundamentalAPI) { parent = parentStateNode.instance; isContainer = false; } default: invariant( false, 'Invalid host parent fiber. This error is likely caused by a bug ' + 'in React. Please file an issue.', ); } // 如果父 fiber 有 ContentReset 的 flags 副作用，则重置其文本内容 if (parentFiber.flags & ContentReset) { resetTextContent(parent); parentFiber.flags &= ~ContentReset; } // 获取要在哪个兄弟 fiber 之前插入 const before = getHostSibling(finishedWork); if (isContainer) { insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent); } else { insertOrAppendPlacementNode(finishedWork, before, parent); } }

// packages/react-reconciler/src/ReactFiberCommitWork.old.js function insertOrAppendPlacementNodeIntoContainer( node: Fiber, before: ?Instance, parent: Container, ): void { const {tag} = node; // 判断当前节点是否为原生的 dom 节点 const isHost = tag === HostComponent || tag === HostText; if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) { // 是原生 dom 节点，在父节点的对应位置插入当前节点 const stateNode = isHost ? node.stateNode : node.stateNode.instance; if (before) { insertInContainerBefore(parent, stateNode, before); } else { appendChildToContainer(parent, stateNode); } } else if (tag === HostPortal) { // 如是 Portal 不做处理 } else { // 不是原生 dom 节点，则遍历插入当前节点的各个子节点 const child = node.child; if (child !== null) { insertOrAppendPlacementNodeIntoContainer(child, before, parent); let sibling = child.sibling; while (sibling !== null) { insertOrAppendPlacementNodeIntoContainer(sibling, before, parent); sibling = sibling.sibling; } } } }

// packages/react-dom/src/client/ReactDOMHostConfig.js export function insertInContainerBefore( container: Container, child: Instance | TextInstance, beforeChild: Instance | TextInstance | SuspenseInstance, ): void { if (container.nodeType === COMMENT_NODE) { // 如果父节点为注释类型，则在父节点的父节点下插入新的 dom (container.parentNode: any).insertBefore(child, beforeChild); } else { // 否则直接插入新的 dom container.insertBefore(child, beforeChild); } }

export function appendChildToContainer( container: Container, child: Instance | TextInstance, ): void { let parentNode; if (container.nodeType === COMMENT_NODE) { // 如果父节点为注释类型，则在父节点的父节点下插入新的 dom parentNode = (container.parentNode: any); parentNode.insertBefore(child, container); } else { // 否则直接插入新的 dom parentNode = container; parentNode.appendChild(child); } // ... }

// packages/react-reconciler/src/ReactFiberCommitWork.old.js function commitWork(current: Fiber | null, finishedWork: Fiber): void { // ... switch (finishedWork.tag) { // ... case ClassComponent: { return; } case HostComponent: { // 获取真实 dom 节点 const instance: Instance = finishedWork.stateNode; if (instance != null) { // 获取新的 props const newProps = finishedWork.memoizedProps; // 获取老的 props const oldProps = current !== null ? current.memoizedProps : newProps; const type = finishedWork.type; // 取出 updateQueue const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any); // 清空 updateQueue finishedWork.updateQueue = null; if (updatePayload !== null) { // 提交更新 commitUpdate( instance, updatePayload, type, oldProps, newProps, finishedWork, ); } } return; } case HostText: { // 获取真实文本节点 const textInstance: TextInstance = finishedWork.stateNode; // 获取新的文本内容 const newText: string = finishedWork.memoizedProps; // 获取老的文本内容 const oldText: string = current !== null ? current.memoizedProps : newText; // 提交更新 commitTextUpdate(textInstance, oldText, newText); return; } case HostRoot: { // ssr操作，暂不关注 if (supportsHydration) { const root: FiberRoot = finishedWork.stateNode; if (root.hydrate) { root.hydrate = false; commitHydratedContainer(root.containerInfo); } } return; } case Profiler: { return; } // ... }

// packages/react-dom/src/client/ReactDOMHostConfig.js export function commitUpdate( domElement: Instance, updatePayload: Array, type: string, oldProps: Props, newProps: Props, internalInstanceHandle: Object, ): void { // 做了 domElement[internalPropsKey] = props 的操作 updateFiberProps(domElement, newProps); // 应用给真实 dom updateProperties(domElement, updatePayload, type, oldProps, newProps); }

// packages/react-dom/src/client/ReactDOMComponent.js export function updateProperties( domElement: Element, updatePayload: Array, tag: string, lastRawProps: Object, nextRawProps: Object, ): void { // 针对表单组件进行特殊处理，例如更新 radio 的 checked 值 if ( tag === 'input' && nextRawProps.type === 'radio' && nextRawProps.name != null ) { ReactDOMInputUpdateChecked(domElement, nextRawProps); } // 判断是否为用户自定义的组件，即是否包含 "-" const wasCustomComponentTag = isCustomComponent(tag, lastRawProps); const isCustomComponentTag = isCustomComponent(tag, nextRawProps); // 将 diff 结果应用于真实 dom updateDOMProperties( domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag, ); // 针对表单的特殊处理 switch (tag) { case 'input': ReactDOMInputUpdateWrapper(domElement, nextRawProps); break; case 'textarea': ReactDOMTextareaUpdateWrapper(domElement, nextRawProps); break; case 'select': ReactDOMSelectPostUpdateWrapper(domElement, nextRawProps); break; 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：React render核心阶段深入探究穿插scheduler与reconciler_React_
                                                                
下一篇：BOM操作querySelector querySeletorAll获取标签对象_javascript技巧_