Yzz
Yzz
2021年05月03日入驻 合计 2 个作品 累计 17.54 万字 共有 3 订阅
  • mutation阶段

    终于到了执行DOM操作的mutation阶段。
  • before mutation阶段

    在本节正式开始前,让我们复习下这一章到目前为止所学的。
  • 流程概览

    上一章最后一节我们介绍了,commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。
  • completeWork

    在流程概览一节我们了解组件在render阶段会经历beginWork与completeWork。

    上一节我们讲解了组件执行beginWork后会创建子Fiber节点,节点上可能存在effectTag。

    这一节让我们看看completeWork会做什么工作。

    你可以从这里看到completeWork方法定义。
  • beginWork

    上一节我们了解到render阶段的工作可以分为“递”阶段和“归”阶段。其中“递”阶段会执行beginWork,“归”阶段会执行completeWork。这一节我们看看“递”阶段的beginWork方法究竟做了什么。
  • 流程概览

    render阶段开始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法的调用。这取决于本次更新是同步更新还是异步更新。
  • 深入理解JSX

    JSX作为描述组件内容的数据结构,为JS赋予了更多视觉表现力。在React中我们大量使用他。在深入源码之前,有些疑问我们需要先解决:

    JSX和Fiber节点是同一个东西么?
    React Component、React Element是同一个东西么,他们和JSX有什么关系?

    带着这些疑问,让我们开始这一节的学习。
  • 调试源码

    了解了源码的文件目录,这一节我们看看如何调试源码。
  • 源码的文件结构

    经过之前的学习,我们已经知道React16的架构分为三层:

    Scheduler(调度器)—— 调度任务的优先级,高优任务优先进入Reconciler
    Reconciler(协调器)—— 负责找出变化的组件
    Renderer(渲染器)—— 负责将变化的组件渲染到页面上
    那么架构是如何体现在源码的文件结构上呢,让我们一起看看吧。
  • 总结

    通过本章的学习,我们了解了React的Scheduler-Reconciler-Renderer架构体系,在结束本章前,我想介绍几个源码内的术语:
  • Fiber架构的工作原理

    通过上一节的学习,我们了解了Fiber是什么,知道Fiber节点可以保存对应的DOM节点。

    相应的,Fiber节点构成的Fiber树就对应DOM树。

    那么如何更新DOM呢?这需要用到被称为“双缓存”的技术。
  • Fiber架构的实现原理

    在新的React架构一节中,我们提到的虚拟DOM在React中有个正式的称呼——Fiber。在之后的学习中,我们会逐渐用Fiber来取代React16虚拟DOM这一称呼。

    接下来让我们了解下Fiber因何而来?他的作用是什么?
  • Fiber架构的心智模型

    React核心团队成员Sebastian Markbåge(React Hooks的发明者)曾说:我们在React中做的就是践行代数效应(Algebraic Effects)。

    那么,代数效应是什么呢?他和React有什么关系呢。
  • 新架构

    上一节我们聊到React15架构不能支撑异步更新以至于需要重构。那么这一节我们来学习重构后的React16是如何支持异步更新的。
  • 老架构

    在上一节中我们了解了React的理念,简单概括就是快速响应。

    React从v15升级到v16后重构了整个架构。本节我们聊聊v15,看看他为什么不能满足快速响应的理念,以至于被重构。
  • React理念

    我们可以从官网看到React的理念:

    我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。
  • 第八章:Concurrent Mode

  • 第七章:Hooks

    在开始本章学习前,你需要了解Hooks的基本用法。
  • 第六章:状态更新

  • 第五章:Diff算法