首页
作品
资讯
专题
果动
登录
注册
Yzz
2021年05月03日入驻
合计
2
个作品
累计
17.54
万字
共有
2
订阅
最新
订阅
收藏
概览
本章为选读章节
是否学习该章对后续章节的学习没有影响。
2023年05月22日
React技术揭秘
layout阶段
该阶段之所以称为layout,因为该阶段的代码都是在DOM渲染完成(mutation阶段完成)后执行的。
该阶段触发的生命周期钩子和hook可以直接访问到已经改变后的DOM,即该阶段是可以参与DOM layout的阶段。
2023年05月16日
React技术揭秘
mutation阶段
终于到了执行DOM操作的mutation阶段。
2023年05月12日
React技术揭秘
before mutation阶段
在本节正式开始前,让我们复习下这一章到目前为止所学的。
2023年05月04日
React技术揭秘
流程概览
上一章最后一节我们介绍了,commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。
2023年04月20日
React技术揭秘
completeWork
在流程概览一节我们了解组件在render阶段会经历beginWork与completeWork。
上一节我们讲解了组件执行beginWork后会创建子Fiber节点,节点上可能存在effectTag。
这一节让我们看看completeWork会做什么工作。
你可以从这里看到completeWork方法定义。
2023年03月13日
React技术揭秘
beginWork
上一节我们了解到render阶段的工作可以分为“递”阶段和“归”阶段。其中“递”阶段会执行beginWork,“归”阶段会执行completeWork。这一节我们看看“递”阶段的beginWork方法究竟做了什么。
2023年03月10日
React技术揭秘
流程概览
render阶段开始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法的调用。这取决于本次更新是同步更新还是异步更新。
2023年03月02日
React技术揭秘
深入理解JSX
JSX作为描述组件内容的数据结构,为JS赋予了更多视觉表现力。在React中我们大量使用他。在深入源码之前,有些疑问我们需要先解决:
JSX和Fiber节点是同一个东西么?
React Component、React Element是同一个东西么,他们和JSX有什么关系?
带着这些疑问,让我们开始这一节的学习。
2023年02月28日
React技术揭秘
调试源码
了解了源码的文件目录,这一节我们看看如何调试源码。
2023年02月27日
React技术揭秘
源码的文件结构
经过之前的学习,我们已经知道React16的架构分为三层:
Scheduler(调度器)—— 调度任务的优先级,高优任务优先进入Reconciler
Reconciler(协调器)—— 负责找出变化的组件
Renderer(渲染器)—— 负责将变化的组件渲染到页面上
那么架构是如何体现在源码的文件结构上呢,让我们一起看看吧。
2023年02月17日
React技术揭秘
总结
通过本章的学习,我们了解了React的Scheduler-Reconciler-Renderer架构体系,在结束本章前,我想介绍几个源码内的术语:
2023年02月16日
React技术揭秘
Fiber架构的工作原理
通过上一节的学习,我们了解了Fiber是什么,知道Fiber节点可以保存对应的DOM节点。
相应的,Fiber节点构成的Fiber树就对应DOM树。
那么如何更新DOM呢?这需要用到被称为“双缓存”的技术。
2023年02月13日
React技术揭秘
Fiber架构的实现原理
在新的React架构一节中,我们提到的虚拟DOM在React中有个正式的称呼——Fiber。在之后的学习中,我们会逐渐用Fiber来取代React16虚拟DOM这一称呼。
接下来让我们了解下Fiber因何而来?他的作用是什么?
2023年02月08日
React技术揭秘
Fiber架构的心智模型
React核心团队成员Sebastian Markbåge(React Hooks的发明者)曾说:我们在React中做的就是践行代数效应(Algebraic Effects)。
那么,代数效应是什么呢?他和React有什么关系呢。
2023年02月07日
React技术揭秘
新架构
上一节我们聊到React15架构不能支撑异步更新以至于需要重构。那么这一节我们来学习重构后的React16是如何支持异步更新的。
2023年02月03日
React技术揭秘
老架构
在上一节中我们了解了React的理念,简单概括就是快速响应。
React从v15升级到v16后重构了整个架构。本节我们聊聊v15,看看他为什么不能满足快速响应的理念,以至于被重构。
2023年01月31日
React技术揭秘
React理念
我们可以从官网看到React的理念:
我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。
2023年01月28日
React技术揭秘
第八章:Concurrent Mode
2023年01月06日
React技术揭秘
第七章:Hooks
在开始本章学习前,你需要了解Hooks的基本用法。
2023年01月06日
React技术揭秘
前一页
后一页