const App = () => {
  return (
    <div>
      <button>+1</button>
      <A count={0} />
    </div>
  );
};
const A = (props) => {
  useEffect(() => {
    console.log(props.count);
  }, [props.count]);
  return <div>{props.count}</div>;
};

react 內(nèi)部遍歷核心邏輯：

在 render 時(shí)調(diào)用 commitPassiveUnmountOnFiber 函數(shù)
commitPassiveUnmountOnFiber 處理不同的 WorkTag，并調(diào)用 recursivelyTraversePassiveUnmountEffects
recursivelyTraversePassiveUnmountEffects 根據(jù)當(dāng)前 Fiber 的子節(jié)點(diǎn)有沒(méi)有 passive effect（useEffect，useLayoutEffect）來(lái)決定是否遍歷當(dāng)前 Fiber 的子節(jié)點(diǎn)
- 如果子節(jié)點(diǎn)有 passive effect，則優(yōu)先遍歷子節(jié)點(diǎn) (深度優(yōu)先)，直到找到最終的葉子節(jié)點(diǎn)，退出當(dāng)前循環(huán)
- 然后進(jìn)入兄弟節(jié)點(diǎn)，開始遍歷兄弟節(jié)點(diǎn)的子節(jié)點(diǎn)
  - 具體從哪個(gè)兄弟節(jié)點(diǎn)開始遍歷，react 選擇的是離退出循環(huán)的那個(gè)葉子節(jié)點(diǎn)的父節(jié)點(diǎn)，檢查有沒(méi)有子節(jié)點(diǎn)，以此循環(huán)遍歷
- 直到最后找到所有有 passive effect 的節(jié)點(diǎn)

代碼簡(jiǎn)化：

commitPassiveUnmountOnFiber(root.current);
function commitPassiveUnmountOnFiber(finishedWork) {
  // 省略了處理不同的 WorkTag
  recursivelyTraversePassiveUnmountEffects(finishedWork);
}
function recursivelyTraversePassiveUnmountEffects(parentFiber) {
  // 省略了其他處理
  if (parentFiber.subtreeFlags & PassiveMask) {
    let child = parentFiber.child;
    while (child !== null) {
      commitPassiveUnmountOnFiber(child);
      child = child.sibling;
    }
  }
}

所以對(duì)于這段 dom 的遍歷邏輯是：

首先從根組件開始 FiberRootNode，取到 current
- 也就是說(shuō) FiberRootNode.current 是 div#root 這是一個(gè) fiber，它的 tag 是 3
由于 App 的子組件有 passive effect，所以會(huì)進(jìn)入 App 組件，它的 tag 是 0
App 組件中節(jié)點(diǎn)是 <div>，<di > 的 tag 是 5
- <div> 下面有兩個(gè)子元素 <button>、<A>
先遍歷 <button> 它的 tag 是 5
<button> 內(nèi)部只有一個(gè)文本節(jié)點(diǎn)，沒(méi)有 passive effect
- 所以 react 不遍歷了（跳出當(dāng)前遍歷的循環(huán)，也就是 button 這條不在遍歷了）
跳出循環(huán)后，查看 button 的兄弟節(jié)點(diǎn)，它的兄弟節(jié)點(diǎn)是 <A>，<A> 的 tag 是 0
由于 <A> 節(jié)點(diǎn)的子節(jié)點(diǎn)沒(méi)有 passive effect，所以跳出循環(huán)，結(jié)束整個(gè)遍歷

總結(jié)

從跟節(jié)點(diǎn)開始遍歷
當(dāng)前組件的子組件有沒(méi)有 passive effect
采取深度優(yōu)先
如果 dom 節(jié)點(diǎn)內(nèi)有函數(shù)組件，則這個(gè) dom 會(huì)被遍歷，否則不會(huì)遍歷
如果當(dāng)前 fiber 下的所有子 fiber 都沒(méi)有 passive effect ，則這一整個(gè)都鏈表都不會(huì)被遍歷
如果當(dāng)前 fiber 只有 dom，則這些 dom 也不會(huì)遍歷