react源码解析8.render阶段

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.