react源码解析2.react的设计理念

react源码解析2.react的设计理念

视频课程（高效学习）：进入课程

课程目录：

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

异步可中断

• React15慢在哪里

在讲这部分之前，需要讲是那些因素导致了react变慢，并且需要重构呢。

React15之前的协调过程是同步的，也叫stack reconciler，又因为js的执行是单线程的，这就导致了在更新比较耗时的任务时，不能及时响应一些高优先级的任务，比如用户的输入，所以页面就会卡顿，这就是cpu的限制。

• 解决方案

如何解决这个问题呢，试想一下，如果我们在日常的开发中，在单线程的环境中，遇到了比较耗时的代码计算会怎么做呢，首先我们可能会将任务分割，让它能够被中断，在其他任务到来的时候让出执行权，当其他任务执行后，再从之前中断的部分开始异步执行剩下的计算。所以关键是实现一套异步可中断的方案。

• 实现

在刚才的解决方案中提到了任务分割，和异步执行，并且能让出执行权，由此可以带出react中的三个概念

1. Fiber：react15的更新是同步的，因为它不能将任务分割，所以需要一套数据结构让它既能对应真实的dom又能作为分隔的单元，这就是Fiber。

   let firstFiber
   let nextFiber = firstFiber
   let shouldYield = false
   //firstFiber->firstChild->sibling
   function performUnitOfWork(nextFiber){
        
     //...
     return nextFiber.next
   }
   
   function workLoop(deadline){
        
     while(nextFiber && !shouldYield){
        
             nextFiber =