修改app.js代码，将num放入code标签的title属性中。

  1. import "./App.css"
  2. import { useState } from "react"
  3. function App() {
  4.   const [num, setNum] = useState(0)
  6.   const handleNum = () => {
  7.     let _num = num + 1
  8.     setNum(_num)
  9.   }
  11.   return (
  12.     <div className="App">
  13.       <header className="App-header">
  14.         <p onClick={handleNum}>
  15.           <code title={num}>{num}</code>
  16.         </p>
  17.         <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
  18.           Learn React
  19.         </a>
  20.       </header>
  21.     </div>
  22.   )
  23. }
  25. export default App

初次渲染

在首屏渲染中，comleteWork，根据不同的tag进入不同的component中，code的tag为5，进入hostComponent中，因为current为null，会进入createInstance，创建新的dom元素。

  1. function completeWork(current, workInProgress, renderLanes) {
  2.   var newProps = workInProgress.pendingProps; // Note: This intentionally doesn't check if we're hydrating because comparing
  3.   // to the current tree provider fiber is just as fast and less error-prone.
  4.   // Ideally we would have a special version of the work loop only
  5.   // for hydration.
  7.   popTreeContext(workInProgress);
  9.   switch (workInProgress.tag) {
  10.     case IndeterminateComponent:
  11.     case LazyComponent:
  12.     case SimpleMemoComponent:
  13.     case FunctionComponent:
  14.     case ForwardRef:
  15.     case Fragment:
  16.     case Mode:
  17.     case Profiler:
  18.     case ContextConsumer:
  19.     case MemoComponent:
  20.       bubbleProperties(workInProgress);
  21.       return null;
  23.     case ClassComponent:
  24.         ...
  26.     case HostComponent:
  27.       {
  28.         popHostContext(workInProgress);
  29.         var rootContainerInstance = getRootHostContainer();
  30.         var type = workInProgress.type;
  32.         if (current !== null && workInProgress.stateNode != null) {
  33.           updateHostComponent$1(current, workInProgress, type, newProps, rootContainerInstance);
  35.           if (current.ref !== workInProgress.ref) {
  36.             markRef$1(workInProgress);
  37.           }
  38.         } else {
  39.           if (!newProps) {
  40.             if (workInProgress.stateNode === null) {
  41.               throw new Error('We must have new props for new mounts. This error is likely ' + 'caused by a bug in React. Please file an issue.');
  42.             } // This can happen when we abort work.
  45.             bubbleProperties(workInProgress);
  46.             return null;
  47.           }
  49.           var currentHostContext = getHostContext(); // TODO: Move createInstance to beginWork and keep it on a context
  50.           // "stack" as the parent. Then append children as we go in beginWork
  51.           // or completeWork depending on whether we want to add them top->down or
  52.           // bottom->up. Top->down is faster in IE11.
  54.           var _wasHydrated = popHydrationState(workInProgress);
  56.           if (_wasHydrated) {
  57.             // TODO: Move this and createInstance step into the beginPhase
  58.             // to consolidate.
  59.             if (prepareToHydrateHostInstance(workInProgress, rootContainerInstance, currentHostContext)) {
  60.               // If changes to the hydrated node need to be applied at the
  61.               // commit-phase we mark this as such.
  62.               markUpdate(workInProgress);
  63.             }
  64.           } else {
  65.             var instance = createInstance(type, newProps, rootContainerInstance, currentHostContext, workInProgress);
  66.             appendAllChildren(instance, workInProgress, false, false);
  67.             workInProgress.stateNode = instance; // Certain renderers require commit-time effects for initial mount.
  68.             // (eg DOM renderer supports auto-focus for certain elements).
  69.             // Make sure such renderers get scheduled for later work.
  71.             if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) {
  72.               markUpdate(workInProgress);
  73.             }
  74.           }
  76.           if (workInProgress.ref !== null) {
  77.             // If there is a ref on a host node we need to schedule a callback
  78.             markRef$1(workInProgress);
  79.           }
  80.         }
  82.         bubbleProperties(workInProgress);
  83.         return null;
  84.       }
  85.     ...
  86.   }
  87. }

image.png

触发更新

updateHostComponent$1

触发更新时，current不为null，进入 updateHostComponent$1中
image.png

prepareUpdate

image.png

diffProperties

  1. function diffProperties(domElement, tag, lastRawProps, nextRawProps, rootContainerElement) {
  2.   {
  3.     validatePropertiesInDevelopment(tag, nextRawProps);
  4.   }
  6.   var updatePayload = null;
  7.   var lastProps;
  8.   var nextProps;
  9.   //根据不同的tag进入不同逻辑，当前tag为code不为表单属性，进入default
  10.   switch (tag) {
  11.     case 'input':
  12.       lastProps = getHostProps(domElement, lastRawProps);
  13.       nextProps = getHostProps(domElement, nextRawProps);
  14.       updatePayload = [];
  15.       break;
  17.     case 'select':
  18.       lastProps = getHostProps$1(domElement, lastRawProps);
  19.       nextProps = getHostProps$1(domElement, nextRawProps);
  20.       updatePayload = [];
  21.       break;
  23.     case 'textarea':
  24.       lastProps = getHostProps$2(domElement, lastRawProps);
  25.       nextProps = getHostProps$2(domElement, nextRawProps);
  26.       updatePayload = [];
  27.       break;
  29.     default:
  30.       lastProps = lastRawProps;
  31.       nextProps = nextRawProps;
  33.       if (typeof lastProps.onClick !== 'function' && typeof nextProps.onClick === 'function') {
  34.         // TODO: This cast may not be sound for SVG, MathML or custom elements.
  35.         trapClickOnNonInteractiveElement(domElement);
  36.       }
  38.       break;
  39.   }
  41.   //检验属性合法性
  42.   assertValidProps(tag, nextProps);
  43.   var propKey;
  44.   var styleName;
  45.   var styleUpdates = null;
  47.   //遍历上一次属性
  48.   for (propKey in lastProps) {
  49.     if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) {
  50.       continue;
  51.     }
  53.     if (propKey === STYLE) {
  54.       var lastStyle = lastProps[propKey];
  56.       for (styleName in lastStyle) {
  57.         if (lastStyle.hasOwnProperty(styleName)) {
  58.           if (!styleUpdates) {
  59.             styleUpdates = {};
  60.           }
  62.           styleUpdates[styleName] = '';
  63.         }
  64.       }
  65.     } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) ; else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (propKey === AUTOFOCUS) ; else if (registrationNameDependencies.hasOwnProperty(propKey)) {
  66.       // This is a special case. If any listener updates we need to ensure
  67.       // that the "current" fiber pointer gets updated so we need a commit
  68.       // to update this element.
  69.       if (!updatePayload) {
  70.         updatePayload = [];
  71.       }
  72.     } else {
  73.       // For all other deleted properties we add it to the queue. We use
  74.       // the allowed property list in the commit phase instead.
  75.       (updatePayload = updatePayload || []).push(propKey, null);
  76.     }
  77.   }
  79.   //遍历下一次属性
  80.   for (propKey in nextProps) {
  81.     //对应的值
  82.     var nextProp = nextProps[propKey];
  83.     var lastProp = lastProps != null ? lastProps[propKey] : undefined;
  85.     if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
  86.       continue;
  87.     }
  89.     if (propKey === STYLE) {
  90.       {
  91.         if (nextProp) {
  92.           // Freeze the next style object so that we can assume it won't be
  93.           // mutated. We have already warned for this in the past.
  94.           Object.freeze(nextProp);
  95.         }
  96.           }
  98.         if (lastProp) {
  99.         // Unset styles on `lastProp` but not on `nextProp`.
  100.         for (styleName in lastProp) {
  101.         if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
  102.         if (!styleUpdates) {
  103.         styleUpdates = {};
  104.       }
  106.         styleUpdates[styleName] = '';
  107.       }
  108.       } // Update styles that changed since `lastProp`.
  111.         for (styleName in nextProp) {
  112.         if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
  113.         if (!styleUpdates) {
  114.         styleUpdates = {};
  115.       }
  117.         styleUpdates[styleName] = nextProp[styleName];
  118.       }
  119.       }
  120.       } else {
  121.         // Relies on `updateStylesByID` not mutating `styleUpdates`.
  122.         if (!styleUpdates) {
  123.         if (!updatePayload) {
  124.         updatePayload = [];
  125.       }
  127.         updatePayload.push(propKey, styleUpdates);
  128.       }
  130.         styleUpdates = nextProp;
  131.       }
  132.       } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
  133.         var nextHtml = nextProp ? nextProp[HTML$1] : undefined;
  134.         var lastHtml = lastProp ? lastProp[HTML$1] : undefined;
  136.         if (nextHtml != null) {
  137.         if (lastHtml !== nextHtml) {
  138.         (updatePayload = updatePayload || []).push(propKey, nextHtml);
  139.       }
  140.       }
  141.       } else if (propKey === CHILDREN) {
  142.         if (typeof nextProp === 'string' || typeof nextProp === 'number') {
  143.         (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
  144.       }
  145.       } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING) ; else if (registrationNameDependencies.hasOwnProperty(propKey)) {
  146.         if (nextProp != null) {
  147.         // We eagerly listen to this even though we haven't committed yet.
  148.         if ( typeof nextProp !== 'function') {
  149.         warnForInvalidEventListener(propKey, nextProp);
  150.       }
  152.         if (propKey === 'onScroll') {
  153.         listenToNonDelegatedEvent('scroll', domElement);
  154.       }
  155.       }
  157.         if (!updatePayload && lastProp !== nextProp) {
  158.         // This is a special case. If any listener updates we need to ensure
  159.         // that the "current" props pointer gets updated so we need a commit
  160.         // to update this element.
  161.         updatePayload = [];
  162.       }
  163.       } else {
  164.         // For any other property we always add it to the queue and then we
  165.         // filter it out using the allowed property list during the commit.
  166.         (updatePayload = updatePayload || []).push(propKey, nextProp);
  167.       }
  168.       }
  170.         if (styleUpdates) {
  171.         {
  172.         validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE]);
  173.       }
  175.         (updatePayload = updatePayload || []).push(STYLE, styleUpdates);
  176.       }
  178.         return updatePayload;
  179.       } // Apply the diff.

image.png

for (propKey in lastProps)

lastProps有两个属性，一个是title，一个是children，其中值都为0
image.png
终止的情况是，nextProps存在propKey或者lastProps不存在propKey或者 lastProps[propKey] == null，下方的循环争对lastProps的propKey对应的value被删除的情况，否则跳出for循环。
因为code的两个属性的propKey没有被删除，因此跳出循环。
image.png

for (propKey in nextProps)

更新时，num的值为1，nextProps也有两个属性，一个是title，一个是children，因此值都为1
image.png
终止的情况是，nextProps不存在propKey)或者nextProp === lastProp或者nextProp == null && lastProp == null，争对的是更新或者新增的情况，否则跳出循环。
循环中，根据propKey的不同，进入不同的逻辑中。

  • title属性

由于title属性不属于这些属性，进入默认的处理逻辑。title处理完后，tilte属性会赋值给一个数组，数组第i项时propKey，第i+1项是对应的propsKey的value,即nextProp
image.png

  • children属性

image.png
diffProperties返回的数组，返回一个第i项是属性，第i+1项是值的数组。
image.png
prepareUpdate的数组返回给workInProgress.updateQueue。当updatePayload存在的情况下，进入markUpdate中。
image.png

markUpdate：将workInProgress的flags增加一个update的属性

  1. function markUpdate(workInProgress) {
  2.   // Tag the fiber with an update effect. This turns a Placement into
  3.   // a PlacementAndUpdate.
  4.   workInProgress.flags |= Update;
  5. }

completeUnitOfWork：生成包含effectTag的链表

根据上图的call Stack中，执行完completeWork后进入performSyncWorkOnRoot中，进入commitRoot，最终进入commit阶段。

  1. function completeUnitOfWork(unitOfWork) {
  2.   // Attempt to complete the current unit of work, then move to the next
  3.   // sibling. If there are no more siblings, return to the parent fiber.
  4.   var completedWork = unitOfWork;
  6.   do {
  7.     // The current, flushed, state of this fiber is the alternate. Ideally
  8.     // nothing should rely on this, but relying on it here means that we don't
  9.     // need an additional field on the work in progress.
  10.     //当前节点
  11.     var current = completedWork.alternate;
  12.     //当前节点的父级 对应的FIber节点
  13.     var returnFiber = completedWork.return; // Check if the work completed or if something threw.
  14.       //如果当前完成节点的兄弟节点在执行“递”或“归”阶段抛出错误时，
  15.     //表示这颗子树没有完成“递”与“归”的阶段，所以这个父节点就会被标记成Incomplete。
  16.     //这些子树不包含Incomplete，表示这颗子树顺利完成了“递”与“归”的阶段。
  17.     //此时需要将包含effectTag的节点挂载到returnFiber上（此处与视频源代码存在出处）
  18.     if ((completedWork.flags & Incomplete) === NoFlags) {
  19.       setCurrentFiber(completedWork);
  20.       var next = void 0;
  22.       if ( (completedWork.mode & ProfileMode) === NoMode) {
  23.         next = completeWork(current, completedWork, subtreeRenderLanes);
  24.       } else {
  25.         startProfilerTimer(completedWork);
  26.         next = completeWork(current, completedWork, subtreeRenderLanes); // Update render duration assuming we didn't error.
  28.         stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);
  29.       }
  31.       resetCurrentFiber();
  33.       if (next !== null) {
  34.         // Completing this fiber spawned new work. Work on that next.
  35.         workInProgress = next;
  36.         return;
  37.       }
  38.     } else {
  39.       // This fiber did not complete because something threw. Pop values off
  40.       // the stack without entering the complete phase. If this is a boundary,
  41.       // capture values if possible.
  42.       var _next = unwindWork(current, completedWork); // Because this fiber did not complete, don't reset its lanes.
  45.       if (_next !== null) {
  46.         // If completing this work spawned new work, do that next. We'll come
  47.         // back here again.
  48.         // Since we're restarting, remove anything that is not a host effect
  49.         // from the effect tag.
  50.         _next.flags &= HostEffectMask;
  51.         workInProgress = _next;
  52.         return;
  53.       }
  55.       if ( (completedWork.mode & ProfileMode) !== NoMode) {
  56.         // Record the render duration for the fiber that errored.
  57.         stopProfilerTimerIfRunningAndRecordDelta(completedWork, false); // Include the time spent working on failed children before continuing.
  59.         var actualDuration = completedWork.actualDuration;
  60.         var child = completedWork.child;
  62.         while (child !== null) {
  63.           actualDuration += child.actualDuration;
  64.           child = child.sibling;
  65.         }
  67.         completedWork.actualDuration = actualDuration;
  68.       }
  70.       if (returnFiber !== null) {
  71.         // Mark the parent fiber as incomplete and clear its subtree flags.
  72.         returnFiber.flags |= Incomplete;
  73.         returnFiber.subtreeFlags = NoFlags;
  74.         returnFiber.deletions = null;
  75.       } else {
  76.         // We've unwound all the way to the root.
  77.         workInProgressRootExitStatus = RootDidNotComplete;
  78.         workInProgress = null;
  79.         return;
  80.       }
  81.     }
  83.     var siblingFiber = completedWork.sibling;
  85.     if (siblingFiber !== null) {
  86.       // If there is more work to do in this returnFiber, do that next.
  87.       workInProgress = siblingFiber;
  88.       return;
  89.     } // Otherwise, return to the parent
  92.     completedWork = returnFiber; // Update the next thing we're working on in case something throws.
  94.     workInProgress = completedWork;
  95.   } while (completedWork !== null); // We've reached the root.
  98.   if (workInProgressRootExitStatus === RootInProgress) {
  99.     workInProgressRootExitStatus = RootCompleted;
  100.   }
  101. }

如果将RootFiber比喻一颗圣诞树，圣诞树上的灯表示一个FIber节点，每一次更新时，某些Fiber节点会标记上一些effectTag的标记，表示更新操作。

更新时是否需要像初始化渲染时，采用深度优先的方式，遍历整棵Fiber树，来找到包含effectTag的节点吗？

可行但效率低。如果一个节点包含Efag Tag，会与其他包含effectTag的Fiber节点，组成一个链表，就像图中连接红色灯的黄色灯带一样。当整个render阶段完成时，就形成一个连接所有Efag Tag的完整的链表。因此更新时，不需要像初次渲染时对root Fiber树广度遍历，只需遍历这条链表，就可以找到包含effectTag的节点。
image.png
returnFiber（当前节点的父级 对应的FIber节点)
image.png
completedWork表示当前完成的Fiber节点。
image.png
image.png

  1. //视频中此段代码
  2.   if (returnFiber.firstEffect === null) {
  3.     returnFiber.firstEffect = completedWork.firstEffect;
  4.   }
  5.   if (completedWork.lastEffect !== null) {
  6.     if (returnFiber.lastEffect !== null) {
  7.       returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
  8.     }
  9.     returnFiber.lastEffect = completedWork.lastEffect;
  10.   }
  12.   const effectTag = completedWork.effectTag;
  14.   if (effectTag > PerformedWork) {
  15.     if (returnFiber.lastEffect !== null) {
  16.       returnFiber.lastEffect.nextEffect = completedWork;
  17.     } else {
  18.       returnFiber.firstEffect = completedWork;
  19.     }
  20.     returnFiber.lastEffect = completedWork;
  21.   }

p标签不为null，且p标签的effectTag按位与Incomplete的值不等于NoFlags。如果当前完成节点的兄弟节点在执行“递”或“归”阶段抛出错误时，表示这颗子树没有完成“递”与“归”的阶段，所以这个父节点就会被标记成Incomplete。这些子树不包含Incomplete，表示这颗子树顺利完成了“递”与“归”的阶段，此时需要将包含effectTag的节点挂载到EffectTag的链表上。

1.code

第一个进入completeUnitOfWork的Firber节点是code，code的firstEffct为null,继续往下，判断当前completeWork是否包含effectTag（code的Tiltle和children发生了变化），包含进入下面returnFiber.firstEffect=completedWork.firstEffect，returnFiber.lastEffect=completedWork.lastEffect，即p的firstEffct赋值给当前的code，p的lastEffect赋值给当前的code。

2.p

下一个是p，p的returnFiber是header，header的firstEffect为null，则returnFiber.firstEffect=completedWork.firstEffect，即header的firstEffect赋值给p。继续，completedWork.lastEffect !== null，当前节点的lastEffect不等于null，继续，
header.lastEffect为null，returnFiber.lastEffect = completedWork.lastEffect，header的lastEffect等于p的lastEffect,继续
image.png
p的effect是否包含Effect，原因？
因为P的props有一个箭头函数onClick，接受一个箭头函数，所以每一次render时，他的onClick的值都是不同的箭头函数，所以p的属性都有变化，所以包含Effct

  1. ....
  2.   const handleNum = () => {
  3.     let _num = num + 1
  4.     setNum(_num)
  5.   }
  6. <p onClick={handleNum}>
  7.   <code title={num}>{num}</code>
  8. </p>
  9. .....

header的lastEffect不为null，将header的lastEffct的nextEffect赋值给p，header的lastEffect赋值给p
image.png

3.a

下一个是a，header的firstEffect不为null，跳过；a的lastEffect等于null，跳过;a的内容不变，不包含effct，跳过。

4.header

div的firstEffect为null，div的firstEffect等于header的firstEffect；header的lastEffect不等于null，div的lastEffect等于null。div的lastEffect等于header的lastEffect(即p)。header不包含effect。
image.png
由此可以看出，整个流程中，当到达根节点，根节点的firstEffect指向的是第一个包含effect的叶子节点，此处为code，而code的nextEffect指向的是P。在本次更新中，只有code与p存在effctTag。如果有其他fiber节点的effct存在，p的nectEffect又指向的是下一个含Effect的Fiber 节点。
image.png
finishWork存在firstEffect，他的firstEffect是code,code的nextEffect是p，p的nectEffect为null。
所以本次更新只有code和p包含effect，
结合，这就是render 阶段的完整流程。
completeWork.png