2.react心智模型(来来来,让大脑有react思维吧)

人人都能读懂的react源码解析(大厂高薪必备)

2.react心智模型(来来来,让大脑有react思维吧)

视频课程&调试demos

​ 视频课程的目的是为了快速掌握react源码运行的过程和react中的scheduler、reconciler、renderer、fiber等，并且详细debug源码和分析，过程更清晰。

​ 视频课程：进入课程

​ demos：demo

课程结构:

1. 开篇(听说你还在艰难的啃react源码)
2. react心智模型(来来来,让大脑有react思维吧)
3. Fiber(我是在内存中的dom)
4. 从legacy或concurrent开始(从入口开始,然后让我们奔向未来)
5. state更新流程(setState里到底发生了什么)
6. render阶段(厉害了,我有创建Fiber的技能)
7. commit阶段(听说renderer帮我们打好标记了,映射真实节点吧)
8. diff算法(妈妈再也不担心我的diff面试了)
9. hooks源码(想知道Function Component是怎样保存状态的嘛)
10. scheduler&lane模型(来看看任务是暂停、继续和插队的)
11. concurrent mode(并发模式是什么样的)
12. 手写迷你react(短小精悍就是我)

​

​ 在正式开始之前需要了解一下前置知识，现在不太清楚没关系，这些内容会在后面的章节中出现并且详细介绍，这一章的目标是了解react源码中存在的模型(数据结构或者思想)

react架构

​ react的核心可以用ui=fn(state)来表示，更详细可以用

const state = reconcile(update);
const UI = commit(state);

​ react源码可以分为如下几个模块：

• Scheduler（调度器）： 排序优先级，让优先级高的任务先进行reconcile

• Reconciler（协调器）： 找出哪些节点发生了改变，并打上不同的Tag

• Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上

  ​ Scheduler的作用是调度任务，react15没有Scheduler这部分，所以所有任务没有优先级，也不能中断，只能同步执行。

  ​ Reconciler发生在render阶段，render阶段会分别为节点执行beginWork和completeWork（后面会讲），或者计算state，对比节点的差异，为节点赋值相应的effectTag（对应dom节点的增删改）

  ​ Renderer发生在commit阶段，commit阶段遍历effectList执行对应的dom操作或部分生命周期

  

react17的出现是为了解决什么

​ react之前的版本在reconcile的过程中是同步执行的，而计算复杂组件的差异可能是一个耗时操作，加之js的执行是单线程的，设备性能不同，页面就可能会出现卡顿的现象。此外应用所处的网络状况也不同，也需要应对不同网络状态下获取数据的响应，所以为了解决这两类（cpu、io）问题，react17带了全新的concurrent mode，它是一类功能的合集（如fiber、schduler、lane、suspense），其目的是为了提高应用的响应速度，使应用不在那么卡顿，其核心是实现了一套异步可中断、带优先级的更新。

​ 那么react17怎么实现异步可中断的更新呢，我们知道一般浏览器的fps是60Hz，也就是每16.6ms会刷新一次，而js执行线程和GUI也就是浏览器的绘制是互斥的，因为js可以操作dom，影响最后呈现的结果，所以如果js执行的时间过长，会导致浏览器没时间绘制dom，造成卡顿。react17会在每一帧分配一个时间（时间片）给js执行，如果在这个时间内js还没执行完，那就要暂停它的执行，等下一帧继续执行，把执行权交回给浏览器去绘制。

​ 对比下开启和未开启concurrent mode的区别，开启之后，构建Fiber的任务的执行不会一直处于阻塞状态，而是分成了一个个的task

未开启concurrent

开启concurrent

Fiber双缓存

​ Fiber（Virtual dom）是内存中用来描述dom阶段的对象

​ 在它上面保存了包括这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来形成Fiber树，

​ 还保存了更新状态时用于计算state的updateQueue，updateQueue是一种链表结构，上面可能存在多个未计算的update，update也是一种数据结构，上面包含了更新的数据、优先级等，

​ 除了这些之外，上面还有和副作用有关的信息。

​ 双缓存是指存在两颗Fiber树，current Fiber树描述了当前呈现的dom树&