图解React

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战 在react组件开发的过程中, key是一个常用的属性值, 多用于列表开发. 本文从源码的角度, 分析key在react内部是如何使用的,

`reconcilerChildren`函数(函数中的算法被称为调和算法),分别对单节点和数组节点进行对比. 比较对象是`reactElement`对象和`fiber`对象.

Context提供了一种直接访问祖先节点上的状态的方法, 避免了多级组件层层传递props. 本文将从`fiber树构造`的视角, 分析`Context`的实现原理.

从架构上来讲, SyntheticEvent打通了从外部`原生事件`到内部`fiber树`的交互渠道, 使得`react`能够感知到浏览器提供的`原生事件`, 进而做出响应, 修改`fiber树`.

本节分析了`副作用Hook`从创建到销毁的全部过程, 在`react`内部, 依靠`fiber.flags`和`effect.tag`实现了对`effect`的精准识别.

本节分析`状态Hook`即`useState`的内部原理, 从`同步,异步`更新理解了`update`对象的合并方式, 最终结果存储在`hook.memoizedState`供给function使用.

本节分析了"fiber"与"hook"的内在关系, 通过"renderWithHooks"函数, 把"Hook"链表挂载到了"fiber.memoizedState"之上.

本节从`fiber`视角出发, 总结了`fiber`节点中可以影响最终渲染结果的 2 类属性(`状态`和`副作用`).

本节分析了"fiber 树渲染"的处理过程, 位于"reconciler 运作流程"中的输出阶段, 具体从"渲染前, 渲染, 渲染后"三个方面分解了"commitRootImpl"函数.

本节演示了更新阶段`fiber树构造(对比更新)`的全部过程, 跟踪了创建过程中内存引用的变化情况. 与`初次构造`最大的不同在于`fiber节点`是否可以复用.

本节演示了初次创建`fiber树`的全部过程, 用18张过程图片, 跟踪了创建过程中内存引用的变化情况, 助你深入理解fiber构造原理.

本节是"fiber树构造"的准备篇, 首先在宏观上从不同的视角("任务调度循环", "fiber树构造循环")介绍了"fiber树构造"在"React"体系中所处的位置.

本章主要列举从 react启动到渲染过程出现频率较高, 影响范围较大 , 它们贯穿整个 react 运行时.如: ReactElement 对象, Fiber对象,Update对象,Hook对象等.

React内部对于优先级的管理, 根据功能的不同分为LanePriority, SchedulerPriority, ReactPriorityLevel等3 种类型.

本章节介绍了react应用的 3 种启动方式: legacy模式, concurrent模式和blocking模式. 它们作为react应用的入口, 与reconciler中的"输"阶段相衔接.

本节从宏观上分析了react-reconciler包的核心逻辑, 并将其分为了 4 个步骤: 1. 输入, 2.注册调度任务, 3.执行任务回调, 4.输出.

React的2大工作循环分别是"任务调度循环"和"fiber构造循环". 本文从宏观角度阐述这两大循环的作用, 以及它们之间的区别和联系.

react包, 平时在开发过程中使用的绝大部分api均来自此包(不是所有). 在react启动之后, 正常可以改变渲染的基本操作有 3 个. 以上setState和dispatchAction都由react包直接暴露. 所有要想 react 工作, 基本上是调用react包的 …

来自 wiki 上的解释: 堆栈(stack)又称为栈或堆叠, 是计算机科学中的一种抽象资料类型, 只允许在有序的线性资料集合的一端(称为堆栈顶端top)进行加入数据(push)和移除数据(pop)的运算. 因而按照后进先出(LIFO, Last In First Out)的原…

来自 wiki 上的解释: 链表（Linked list）是一种常见的基础数据结构, 是一种线性表, 但是并不会按线性的顺序存储数据, 而是在每一个节点里存到下一个节点的指针(Pointer).由于不必须按顺序存储，链表在插入的时候可以达到 O(1)的复杂度, 但是查找一个节点…