react原始碼解析8.render階段

視訊講解（高效學習）：進入學習

往期文章：

1.開篇介紹和麵試題

2.react的設計理念

3.react原始碼架構

4.原始碼目錄結構和除錯

5.jsx&核心api

6.legacy和concurrent模式入口函式

7.Fiber架構

8.render階段

9.diff演算法

10.commit階段

11.生命週期

12.狀態更新流程

13.hooks原始碼

14.手寫hooks

15.scheduler&Lane

16.concurrent模式

17.context

18事件系統

19.手寫迷你版react

20.總結&第一章的面試題解答

21.demo

render階段的入口

render階段的主要工作是構建Fiber樹和生成effectList，在第5章中我們知道了react入口的兩種模式會進入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而這兩個方法分別會呼叫workLoopSync或者workLoopConcurrent

//ReactFiberWorkLoop.old.js
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}
 

這兩函式的區別是判斷條件是否存在shouldYield的執行，如果瀏覽器沒有足夠的時間，那麼會終止while迴圈，也不會執行後面的performUnitOfWork函式，自然也不會執行後面的render階段和commit階段，這部分屬於scheduler的知識點，我們在第15章講解。

• workInProgress：新建立的workInProgress fiber

• performUnitOfWork：workInProgress fiber和會和已經建立的Fiber連線起來形成Fiber樹。這個過程類似深度優先遍歷，我們暫且稱它們為‘捕獲階段’和‘冒泡階段’。虛擬碼執行的過程大概如下

  function performUnitOfWork(fiber) {
    if (fiber.child) {
      performUnitOfWork(fiber.child);//beginWork
    }
  
    if (fiber.sibling) {
      performUnitOfWork(fiber.sibling);//completeWork
    }
  }
   
  

render階段整體執行流程

用demo_0看視訊除錯

• 捕獲階段
  從根節點rootFiber開始，遍歷到葉子節點，每次遍歷到的節點都會執行beginWork，並且傳入當前Fiber節點，然後建立或複用它的子Fiber節點，並賦值給workInProgress.child。

• 冒泡階段
  在捕獲階段遍歷到子節點之後，會執行completeWork方法，執行完成之後會判斷此節點的兄弟節點存不存在，如果存在就會為兄弟節點執行completeWork，當全部兄弟節點執行完之後，會向上‘冒泡’到父節點執行completeWork，直到rootFiber。

• 示例，demo_0除錯

  function App() {
    return (
  		<>
        <h1>
          <p>count</p> xiaochen
        </h1>
      </>
    )
  }
  
  ReactDOM.render(<App />, document.getElementById("root"));
  

  當執行完深度優先遍歷之後形成的Fiber樹：

圖中的數字是遍歷過程中的順序，可以看到，遍歷的過程中會從應用的根節點rootFiber開始，依次執行beginWork和completeWork，最後形成一顆Fiber樹，每個節點以child和return相連。

注意：當遍歷到只有一個子文字節點的Fiber時，該Fiber節點的子節點不會執行beginWork和completeWork，如圖中的‘chen’文字節點。這是react的一種優化手段

beginWork

beginWork主要的工作是建立或複用子fiber節點

function beginWork(
  current: Fiber | null,//當前存在於dom樹中對應的Fiber樹
  workInProgress: Fiber,//正在構建的Fiber樹
  renderLanes: Lanes,//第12章在講
): Fiber | null {
 // 1.update時滿足條件即可複用current fiber進入bailoutOnAlreadyFinishedWork函式
  if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
    if (
      oldProps !== newProps ||
      hasLegacyContextChanged() ||
      (__DEV__ ? workInProgress.type !== current.type : false)
    ) {
      didReceiveUpdate = true;
    } else if (!includesSomeLane(renderLanes, updateLanes)) {
      didReceiveUpdate = false;
      switch (workInProgress.tag) {
        // ...
      }
      return bailoutOnAlreadyFinishedWork(
        current,
        workInProgress,
        renderLanes,
      );
    } else {
      didReceiveUpdate = false;
    }
  } else {
    didReceiveUpdate = false;
  }

  //2.根據tag來建立不同的fiber 最後進入reconcileChildren函式
  switch (workInProgress.tag) {
    case IndeterminateComponent: 
      // ...
    case LazyComponent: 
      // ...
    case FunctionComponent: 
      // ...
    case ClassComponent: 
      // ...
    case HostRoot:
      // ...
    case HostComponent:
      // ...
    case HostText:
      // ...
  }
}

從程式碼中可以看到引數中有current Fiber，也就是當前真實dom對應的Fiber樹，在之前介紹Fiber雙快取機制中，我們知道在首次渲染時除了rootFiber外，current 等於 null，因為首次渲染dom還沒構建出來，在update時current不等於 null，因為update時dom樹已經存在了，所以beginWork函式中用current === null來判斷是mount還是update進入不同的邏輯

• mount：根據fiber.tag進入不同fiber的建立函式，最後都會呼叫到reconcileChildren建立子Fiber
• update：在構建workInProgress的時候，當滿足條件時，會複用current Fiber來進行優化，也就是進入bailoutOnAlreadyFinishedWork的邏輯，能複用didReceiveUpdate變數是false，複用的條件是
  1. oldProps === newProps && workInProgress.type === current.type 屬性和fiber的type不變
  2. !includesSomeLane(renderLanes, updateLanes) 更新的優先順序是否足夠，第15章講解

reconcileChildren/mountChildFibers

建立子fiber的過程會進入reconcileChildren，該函式的作用是為workInProgress fiber節點生成它的child fiber即 workInProgress.child。然後繼續深度優先遍歷它的子節點執行相同的操作。

//ReactFiberBeginWork.old.js
export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any,
  renderLanes: Lanes
) {
  if (current === null) {
    //mount時
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    //update
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

reconcileChildren會區分mount和update兩種情況，進入reconcileChildFibers或mountChildFibers，reconcileChildFibers和mountChildFibers最終其實就是ChildReconciler傳遞不同的引數返回的函式，這個引數用來表示是否追蹤副作用，在ChildReconciler中用shouldTrackSideEffects來判斷是否為對應的節點打上effectTag，例如如果一個節點需要進行插入操作，需要滿足兩個條件：

1. fiber.stateNode!==null 即fiber存在真實dom，真實dom儲存在stateNode上

2. (fiber.effectTag & Placement) !== 0 fiber存在Placement的effectTag

   var reconcileChildFibers = ChildReconciler(true);
   var mountChildFibers = ChildReconciler(false);
   

   function ChildReconciler(shouldTrackSideEffects) {
   	function placeChild(newFiber, lastPlacedIndex, newIndex) {
       newFiber.index = newIndex;
   
       if (!shouldTrackSideEffects) {//是否追蹤副作用
         // Noop.
         return lastPlacedIndex;
       }
   
       var current = newFiber.alternate;
   
       if (current !== null) {
         var oldIndex = current.index;
   
         if (oldIndex < lastPlacedIndex) {
           // This is a move.
           newFiber.flags = Placement;
           return lastPlacedIndex;
         } else {
           // This item can stay in place.
           return oldIndex;
         }
       } else {
         // This is an insertion.
         newFiber.flags = Placement;
         return lastPlacedIndex;
       }
     }
   }
   

在之前心智模型的介紹中，我們知道為Fiber打上effectTag之後在commit階段會被執行對應dom的增刪改，而且在reconcileChildren的時候，rootFiber是存在alternate的，即rootFiber存在對應的current Fiber，所以rootFiber會走reconcileChildFibers的邏輯，所以shouldTrackSideEffects等於true會追蹤副作用，最後為rootFiber打上Placement的effectTag，然後將dom一次性插入，提高效能。

export const NoFlags = /*                      */ 0b0000000000000000000;
// 插入dom
export const Placement = /*                */ 0b00000000000010;

在原始碼的ReactFiberFlags.js檔案中，用二進位制位運算來判斷是否存在Placement,例如讓var a = NoFlags,如果需要在a上增加Placement的effectTag，就只要 effectTag | Placement就可以了

bailoutOnAlreadyFinishedWork

//ReactFiberBeginWork.old.js
function bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes) {
  
  //...
	if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
    
    return null;
    
  } else {
    
    cloneChildFibers(current, workInProgress);
    
    return workInProgress.child;
    
  }
}

如果進入了bailoutOnAlreadyFinishedWork複用的邏輯，會判斷優先順序第12章介紹，優先順序足夠則進入cloneChildFibers否則返回null

completeWork

completeWork主要工作是處理fiber的props、建立dom、建立effectList

//ReactFiberCompleteWork.old.js
function completeWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  const newProps = workInProgress.pendingProps;
    
//根據workInProgress.tag進入不同邏輯，這裡我們關注HostComponent，HostComponent，其他型別之後在講
  switch (workInProgress.tag) {
    case IndeterminateComponent:
    case LazyComponent:
    case SimpleMemoComponent:
    case HostRoot:
   	//...
      
    case HostComponent: {
      popHostContext(workInProgress);
      const rootContainerInstance = getRootHostContainer();
      const type = workInProgress.type;

      if (current !== null && workInProgress.stateNode != null) {
        // update時
       updateHostComponent(
          current,
          workInProgress,
          type,
          newProps,
          rootContainerInstance,
        );
      } else {
        // mount時
        const currentHostContext = getHostContext();
        // 建立fiber對應的dom節點
        const instance = createInstance(
            type,
            newProps,
            rootContainerInstance,
            currentHostContext,
            workInProgress,
          );
        // 將後代dom節點插入剛建立的dom裡
        appendAllChildren(instance, workInProgress, false, false);
        // dom節點賦值給fiber.stateNode
        workInProgress.stateNode = instance;

        // 處理props和updateHostComponent類似
        if (
          finalizeInitialChildren(
            instance,
            type,
            newProps,
            rootContainerInstance,
            currentHostContext,
          )
        ) {
          markUpdate(workInProgress);
        }
     }
      return null;
    }

從簡化版的completeWork中可以看到，這個函式做了一下幾件事

• 根據workInProgress.tag進入不同函式，我們以HostComponent舉例
• update時（除了判斷current=null外還需要判斷workInProgress.stateNode=null），呼叫updateHostComponent處理props（包括onClick、style、children ...），並將處理好的props賦值給updatePayload,最後會儲存在workInProgress.updateQueue上
• mount時 呼叫createInstance建立dom，將後代dom節點插入剛建立的dom中，呼叫finalizeInitialChildren處理props（和updateHostComponent處理的邏輯類似）

之前我們有說到在beginWork的mount時，rootFiber存在對應的current，所以他會執行mountChildFibers打上Placement的effectTag，在冒泡階段也就是執行completeWork時，我們將子孫節點通過appendAllChildren掛載到新建立的dom節點上，最後就可以一次性將記憶體中的節點用dom原生方法反應到真實dom中。

​ 在beginWork 中我們知道有的節點被打上了effectTag的標記，有的沒有，而在commit階段時要遍歷所有包含effectTag的Fiber來執行對應的增刪改，那我們還需要從Fiber樹中找到這些帶effectTag的節點嘛，答案是不需要的，這裡是以空間換時間，在執行completeWork的時候遇到了帶effectTag的節點，會將這個節點加入一個叫effectList中,所以在commit階段只要遍歷effectList就可以了（rootFiber.firstEffect.nextEffect就可以訪問帶effectTag的Fiber了）

​ effectList的指標操作發生在completeUnitOfWork函式中，例如我們的應用是這樣的

function App() {
  
  const [count, setCount] = useState(0);
  
  return (
    
   	 <>
      <h1
        onClick={() => {
          setCount(() => count + 1);
        }}
      >
        <p title={count}>{count}</p> xiaochen
      </h1>
    </>
  )
  
}

那麼我們的操作effectList指標如下（這張圖是操作指標過程中的圖，此時遍歷到了app Fiber節點，當遍歷到rootFiber時，h1，p節點會和rootFiber形成環狀連結串列）

rootFiber.firstEffect===h1

rootFiber.firstEffect.next===p

形成環狀連結串列的時候會從觸發更新的節點向上合併effectList直到rootFiber，這一過程發生在completeUnitOfWork函式中，整個函式的作用就是向上合併effectList

//ReactFiberWorkLoop.old.js
function completeUnitOfWork(unitOfWork: Fiber): void {
  let completedWork = unitOfWork;
  do {
    	//...

      if (
        returnFiber !== null &&
        (returnFiber.flags & Incomplete) === NoFlags
      ) {
        if (returnFiber.firstEffect === null) {
          returnFiber.firstEffect = completedWork.firstEffect;//父節點的effectList頭指標指向completedWork的effectList頭指標
        }
        if (completedWork.lastEffect !== null) {
          if (returnFiber.lastEffect !== null) {
            //父節點的effectList頭尾指標指向completedWork的effectList頭指標
            returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
          }
          //父節點頭的effectList尾指標指向completedWork的effectList尾指標
          returnFiber.lastEffect = completedWork.lastEffect;
        }

        const flags = completedWork.flags;
        if (flags > PerformedWork) {
          if (returnFiber.lastEffect !== null) {
            //completedWork本身追加到returnFiber的effectList結尾
            returnFiber.lastEffect.nextEffect = completedWork;
          } else {
            //returnFiber的effectList頭節點指向completedWork
            returnFiber.firstEffect = completedWork;
          }
          //returnFiber的effectList尾節點指向completedWork
          returnFiber.lastEffect = completedWork;
        }
      }
    } else {

      //...

      if (returnFiber !== null) {
        returnFiber.firstEffect = returnFiber.lastEffect = null;//重製effectList
        returnFiber.flags |= Incomplete;
      }
    }

  } while (completedWork !== null);

	//...
}

最後生成的fiber樹如下

然後commitRoot(root);進入commit階段