- 博客(14)
- 收藏
- 关注
RSS订阅原创 十、深入理解react中beginWork的工作流程
如果是update， 接下来会判断 wipFiberNode 是否能够复用，如果不能够复用，那么 update 和 mount 的流程基本是一样的。首先在beginWork中，会判断当前的流程是 mount ，还是 update，判断的依据是根据 currentFiberNode 是否存在。可以看到，在beginWork方法内部，也会做一些 flags标记，这些 flags 标记主要和元素的位置有关系。Reconciler（协调器）是render阶段的 第二个阶段的工作，整个工作的过程可以分为。
2024-12-13 16:28:30
338
原创 十三、深入理解react中的commit工作流程
删除DOM元素的操作发生在commitMutationEffects_begin方法中，首先会拿到deletions 数组，之后遍历该数组进行删除操作，对应的DOM 元素的方法为 commitDeletion。对于还没有插入的dom元素，insertBefore 会将目标DOM 元素插入到 before之前，appendChild会将目标DOM 元素作为父DOM元素的最后一个子元素插入。当Mutation阶段的主要工作完成后，在进入Layout阶段之前，会执行如下的代码来完成FiberTree的切换。
2024-12-13 16:28:04
688
原创 十一、深入理解 react中completeWork的工作流程
我们知道，当整个 Reconciler 完成工作后，会得到一颗完整的 wipFiberTree，这颗wipFiberTree是由 一颗一颗 FiberNode 中有一些标记了 flags，有一些没有标记，那么我们怎么能高效找到散落在这颗 树中有 flag标记的 ，那么此时就可以 通过 flags 冒泡。上面的代码，在FiberNode节点中，Hello 和 world 是同一级的，但是在实际dom元素里面，span 和 world 是同一级的。并且当前的FiberNode会标记 Update。
2024-12-13 16:27:51
804
原创 十二、深入理解React中的diff算法
Render阶段会生成 FiberTree，所谓的 diff实际上就是发生在这个阶段，这里的diff 指的是 current FiberNode 和 JSX对象之间进行对比，然后生成新的 workInProgress FiberNodediff算法本身就有性能上的消耗，在React文档上有说明，即使采用最前沿的算法，如果要完整的对比两颗树，那么算法的复杂度都会达到O(n^3)，n代表元素的数量，如果n是1000，要执行的计算量会达到10亿个数量级所以，React为了降低复杂度，设置了3个限制： 更新前的代码
2024-12-13 16:27:13
659
原创 十四、react中lane模型的理解
React早期采用的是 expirationTime模型，这一点和 Scheduler 里面的设计是一致的。在Scheduler中，设计了5种优先级，不同的优先级会设计对应不同的 timeout，最终会对应不同的expirationTime，然后 task 根据expirationTime 来进行任务的排序。
2024-12-13 16:25:05
989
原创 九、React中的位运算
所谓二进制，就是以二为底的一种计数方式。逢二进一我门经常会使用二进制来进行计算。基于二进制的位运算能够很方便的表达 增删改查比如我们后台管理系统，一般会针对权限的控制，一般这个使用的就是二进制使用二进制来表示权限，首先速度上会更快一些，其次在表示多种权限的时候，会更加方便一些在上面的代码中，会有一个问题，目前仅仅是一对一的关系，但是在实际开发中，往往有很多一对多的关系，也就是一个value可能会应对好几个值在这种情况下，我们使用二进制会方便很多二进制相关的运算。
2024-12-05 15:23:44
820
原创 四、对Fiber的理解以及什么是双缓冲
实际上，我们 可以从三个维度来理解Fiber在React16版本之前，React使用的是Stack架构；16版本之后，重构使用的Fiber架构，各个FiberNode之间是使用链表的形式来串联起来的Fiber 本质也是一个对象，是在之前React元素之上的一个升级版本。每个Fiber对象里面包含着元素的类型、连接的FiberNode、真实dom等信息在每个FibeNode中，保存了本次更新中该React元素变化的数据，还有就是要执行的工作（增加、删除、更新）以及副作用的信息。
2024-10-01 13:57:02
1077
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人