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

  • 概览

    本章为选读章节

    是否学习该章对后续章节的学习没有影响。
    React技术揭秘

  • layout阶段

    该阶段之所以称为layout，因为该阶段的代码都是在DOM渲染完成（mutation阶段完成）后执行的。

    该阶段触发的生命周期钩子和hook可以直接访问到已经改变后的DOM，即该阶段是可以参与DOM layout的阶段。
    React技术揭秘

  • mutation阶段

    终于到了执行DOM操作的mutation阶段。
    React技术揭秘

  • before mutation阶段

    在本节正式开始前，让我们复习下这一章到目前为止所学的。
    React技术揭秘

  • 流程概览

    上一章最后一节我们介绍了，commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。
    React技术揭秘

  • completeWork

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

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

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

    你可以从这里看到completeWork方法定义。
    React技术揭秘

  • beginWork

    上一节我们了解到render阶段的工作可以分为“递”阶段和“归”阶段。其中“递”阶段会执行beginWork，“归”阶段会执行completeWork。这一节我们看看“递”阶段的beginWork方法究竟做了什么。
    React技术揭秘

  • 流程概览

    render阶段开始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法的调用。这取决于本次更新是同步更新还是异步更新。
    React技术揭秘

  • 深入理解JSX

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

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

    带着这些疑问，让我们开始这一节的学习。
    React技术揭秘

  • 调试源码

    了解了源码的文件目录，这一节我们看看如何调试源码。
    React技术揭秘

  • 源码的文件结构

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

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

  • 总结

    通过本章的学习，我们了解了React的Scheduler-Reconciler-Renderer架构体系，在结束本章前，我想介绍几个源码内的术语：
    React技术揭秘

  • Fiber架构的工作原理

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

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

    那么如何更新DOM呢？这需要用到被称为“双缓存”的技术。
    React技术揭秘

  • Fiber架构的实现原理

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

    接下来让我们了解下Fiber因何而来？他的作用是什么？
    React技术揭秘

  • Fiber架构的心智模型

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

    那么，代数效应是什么呢？他和React有什么关系呢。
    React技术揭秘

  • 新架构

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

  • 老架构

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

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

  • React理念

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

    我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。
    React技术揭秘

  • 第八章：Concurrent Mode

    React技术揭秘

  • 第七章：Hooks

    在开始本章学习前，你需要了解Hooks的基本用法。
    React技术揭秘
    • 前一页 后一页