本书的宗旨是打造一本严谨、易懂的React源码分析教程。
为了达到这个目标,在行文上,本书会遵循:
不预设观点 —— 所有观点来自React核心团队成员在公开场合的分享。
丰富的参考资料 —— 包括在线Demo、文章、视频。
保持更新 —— 在React版本更新后会及时补充。当前版本v17.0.0-alpha。
为了达到这个目标,在行文上,本书会遵循:
不预设观点 —— 所有观点来自React核心团队成员在公开场合的分享。
丰富的参考资料 —— 包括在线Demo、文章、视频。
保持更新 —— 在React版本更新后会及时补充。当前版本v17.0.0-alpha。
2023年12月04日
2023年12月02日 在了解其他hook的实现后,理解useMemo与useCallback的实现非常容易。
本节我们以mount与update两种情况分别讨论这两个hook。
本节我们以mount与update两种情况分别讨论这两个hook。
2023年11月30日 ref是reference(引用)的缩写。在React中,我们习惯用ref保存DOM。
事实上,任何需要被"引用"的数据都可以保存在ref中,useRef的出现将这种思想进一步发扬光大。
在Hooks数据结构一节我们讲到:
对于useRef(1),memoizedState保存{current: 1}
本节我们会介绍useRef的实现,以及ref的工作流程。
由于string类型的ref已不推荐使用,所以本节针对function | {current: any}类型的ref。
事实上,任何需要被"引用"的数据都可以保存在ref中,useRef的出现将这种思想进一步发扬光大。
在Hooks数据结构一节我们讲到:
对于useRef(1),memoizedState保存{current: 1}
本节我们会介绍useRef的实现,以及ref的工作流程。
由于string类型的ref已不推荐使用,所以本节针对function | {current: any}类型的ref。
2023年11月23日 在架构篇commit阶段流程概览我们讲解了useEffect的工作流程。
其中我们谈到
在flushPassiveEffects方法内部会从全局变量rootWithPendingPassiveEffects获取effectList。
本节我们深入flushPassiveEffects方法内部探索useEffect的工作原理。
其中我们谈到
在flushPassiveEffects方法内部会从全局变量rootWithPendingPassiveEffects获取effectList。
本节我们深入flushPassiveEffects方法内部探索useEffect的工作原理。
2023年11月21日 Redux的作者Dan加入React核心团队后的一大贡献就是“将Redux的理念带入React”。
这里面最显而易见的影响莫过于useState与useReducer这两个Hook。本质来说,useState只是预置了reducer的useReducer。
本节我们来学习useState与useReducer的实现。
这里面最显而易见的影响莫过于useState与useReducer这两个Hook。本质来说,useState只是预置了reducer的useReducer。
本节我们来学习useState与useReducer的实现。
2023年11月20日 在上一节我们实现了一个极简的useState,了解了Hooks的运行原理。
本节我们讲解Hooks的数据结构,为后面介绍具体的hook打下基础。
本节我们讲解Hooks的数据结构,为后面介绍具体的hook打下基础。
2023年11月08日 为了更好理解Hooks原理,这一节我们遵循React的运行流程,实现一个不到100行代码的极简useState Hook。建议对照着代码来看本节内容。
2023年10月27日 如果你还未使用过Hooks,可以从官方文档开始。
2023年10月19日 当我们有了前面知识的铺垫,就很容易理解this.setState的工作流程。
2023年09月15日 经过五章的学习,我们终于回到了React应用的起点。
这一节我们完整的走通ReactDOM.render完成页面渲染的整个流程。
这一节我们完整的走通ReactDOM.render完成页面渲染的整个流程。
2023年09月03日 通过更新的心智模型,我们了解到更新具有优先级。
那么什么是优先级?优先级以什么为依据?如何通过优先级决定哪个状态应该先被更新?
本节我们会详细讲解。
那么什么是优先级?优先级以什么为依据?如何通过优先级决定哪个状态应该先被更新?
本节我们会详细讲解。
2023年08月21日 通过本章第一节学习,我们知道状态更新流程开始后首先会创建Update对象。
本节我们学习Update的结构与工作流程。
你可以将Update类比心智模型中的一次commit。
本节我们学习Update的结构与工作流程。
你可以将Update类比心智模型中的一次commit。
2023年07月24日 在深入源码前,让我们先建立更新机制的心智模型。
在后面两节讲解源码时,我们会将代码与心智模型联系上,方便你更好理解。
在后面两节讲解源码时,我们会将代码与心智模型联系上,方便你更好理解。
2023年07月03日 经过前几章的学习,我们终于有足够的前置知识理解状态更新的整个流程。
这一章我们看看几种常见的触发状态更新的方法是如何完成工作的。
这一章我们看看几种常见的触发状态更新的方法是如何完成工作的。
2023年06月10日 上一节我们介绍了单一节点的Diff,现在考虑我们有一个FunctionComponent:
2023年06月04日 对于单个节点,我们以类型object为例,会进入reconcileSingleElement
2023年05月22日 本章为选读章节
是否学习该章对后续章节的学习没有影响。
是否学习该章对后续章节的学习没有影响。
2023年05月16日 该阶段之所以称为layout,因为该阶段的代码都是在DOM渲染完成(mutation阶段完成)后执行的。
该阶段触发的生命周期钩子和hook可以直接访问到已经改变后的DOM,即该阶段是可以参与DOM layout的阶段。
该阶段触发的生命周期钩子和hook可以直接访问到已经改变后的DOM,即该阶段是可以参与DOM layout的阶段。
2023年05月12日 终于到了执行DOM操作的mutation阶段。
2023年05月04日 在本节正式开始前,让我们复习下这一章到目前为止所学的。
前一页
后一页