react源码

作者: 糖糖不加糖_ | 来源:发表于2021-09-05 19:45 被阅读0次

scheduler（调度器）：排列优先级，优先级高的先执行reconciler
reconciler（协调器）：render阶段（主要工作：构建Fiber树和生成effectList），找哪个节点改变，打不同的tag（形成effectlist链表，记录需要更新的节点），创建或更新fiber节点（diff算法），采用深度优先遍历
renderer（渲染器）：commit阶段，将reconciler打好标签的节点（主要遍历effectList），渲染到视图

scheduler、reconciler在内存中进行，不影响真实节点
react 17版本的出现，带来了全新的concurrent mode，包含一类功能的合集（fiber、scheduler、lane、suspense），核心是实现了一套，异步可中断，带优先级的更新

js执行线程和GUI也就是浏览器的绘制是互斥的，如果在时间内，没有执行完js，则暂停执行，将执行权交还给浏览器绘制，等下一帧继续执行

任务暂停：shouldYield（当前时间 > 任务开始的时间+yieldInterval，打断任务进行）就是用来判断剩余的时间有没有用尽，用尽了则让权
调度优先级：两个函数创建具有优先级的任务
1、runWithPriority：以一个优先级执行callback，若为同步任务，则优先级为ImmediateSchedulerPriority
2、scheduleCallback：以一个优先级注册callback，适当时机执行，涉及过期时间运算，所以粒度更细
1）优先级意味着过期时间（时间点）。过期时间 = 开始时间（当前时间） + timeout，过期时间 < 当前时间，则要立即执行，过期时间越长，执行优先级越低
2）scheduleCallback调度过程使用了【小顶堆】，所以每次都能取到离过期时间最近的任务
3）未过期任务task存放在timerQueue中，过期任务（每次先执行这个）存放在taskQueue中。
暂停后恢复执行： 在performConcurrentWorkOnRoot函数的结尾有这样一个判断，如果callbackNode等于originalCallbackNode那就恢复任务的执行

image.png

每个优先级是一个31位的二进制数字，1表示位置可用，0表示位置不可用（转换为10进制，数值越小，优先级越高），Lane的优先级粒度更细，ps：二进制计算性能更高

task任务怎么获取优先级的：从高优先级的lanes往下找，没有则换到稍微低一点优先级的lans里继续找
高优先级怎么插队：低优先级已经构建了一部分fiber树，将其还原
怎么解决饥饿问题：（低优先级的任务也要被执行），优先级调度过程中，遍历【未执行的任务包含的lane】，计算过期时间，加入root.expiredLanes，下次调用时优先返回expiredLanes（到期lane）

fiber是在内存中的dom，包含节点的属性、类型、dom。
通过child、sibling、return（返回父节点）构成fiber树
还保存了updateQueue（链表结构），用来计算state，updateQueue有多个未计算的update，update（一种数据结构）保存了更新的数据、优先级（过期时间）
fiberRoot：指整个应用的根节点，只存在一个
rootFiber：应用的节点，可以存在多个
当前的fiber树和更新的fiber树切换的时候：fiberRoot的current指向更新的fiber树（即指向rootFiber）

捕获阶段：beginWork，从应用的根结点rootfiber开始到叶子结点，主要工作是创建或复用子fiber节点
冒泡阶段：completeWork，主要工作是处理fiber的props、创建dom（创建的dom节点赋值给fiber.stateNode）、创建effectList
render阶段，当遍历到只有一个子节点的Fiber时，该Fiber节点的子节点不会执行beginWork和completeWork，这是react的一种优化手段
在render阶段的末尾会调用commitRoot(fiberRoot)，进入commit阶段

image.png

diff算法三个前提

单节点diff（Element、Portal、string、number）

多节点diff（Array、Iterator）
会经历三次遍历（而newChildren存在于jsx当中）

第一次：处理节点更新（props更新，type更新、删除）
1、key不同，结束第一次遍历
2、newChildren或oldFiber遍历完，结束第一次遍历（newChildren遍历完但oldFiber存在，则剩余的全都打deletion标签）
3、key同，type不同，打deletion标签
4、key、type都同，复用
第二次：处理节点新增
1、newChildren和oldFiber都遍历完，多节点diff结束
2、newChildren、oldFiber都没遍历完，进入节点移动逻辑
3、newChildren没遍历完，oldFiber遍历完，newChildren剩余值打【插入】的tag
第三次：处理节点位置改变
1、对比newChildren和oldFiber的各个节点，newChildren[i]能和oldFiber[j]位置对比的上，则i++，j++；否则oldFiber值移动到最后，j++，在与i进行比较