课程收获

学习React源码,不仅能掌握业界最顶尖前端框架的运行原理,探索前端边界。也能让自己成为业务线React大拿。

从v15~v16重构的Fiber架构,再到v16~v17新增的并发模式,React已经逐渐从UI库变为小型的操作系统。

对于想学习React源码的同学来说,这同时是机遇与挑战。

挑战是:React内部运行流程真的很复杂。

机遇是:学完之后,除了拥有框架开发能力外,你的收获将不限于:

编程范式:函数式编程的代数效应思想

操作系统:如何从零实现协程(fiber架构)

数据结构:链表、树、小顶堆

算法:O(n)的Diff算法、掩码

深入浏览器渲染原理

适用人群

1:React 技术栈开发者,希望成为业务线 React 大拿的同学

2:中/高级前端工程师,希望进阶“资深前端工程师”的同学

3:希望成为比面试官更懂 React 的同学

4:寻求突破自身舒适区,探寻前端边界的同学

课程简介

曾有大牛说过:“前端领域十八个月难度翻一倍。”作为前端工程师,如果将自己的定位局限在“熟练使用技术栈完成业务”,那么随着技术革新,慢慢会陷入“学不动了”的境地。这个问题如何解决呢?答案是:探索前端的边界。

在业务之外,前端还有很多富有挑战与机遇的领域,包括但不限于:全栈、移动端、工程化、可视化、框架开发。熟练完成业务并且深入前端某一领域,也是“资深前端工程师”必须掌握的能力。在这些领域中,与我们日常开发关系最密切的,便是“框架开发”了。

授课思路

为了帮你从本质上学懂React源码,本课程的讲解将从理念到架构,从架构到实现,从实现到具体代码。

这是一个自顶向下、抽象程度递减,符合大脑认知的过程。

基于此,本课程划分为三大篇章:

理念篇:带你了解React的设计理念及演进史

架构篇:讲解“设计理念“如何具体落实到代码架构上

实现篇:讲解主要 API如何在“架构体系”中实现

课程特色

基于最新源码,本课程基于最新 React17.0.0-alpha 设计,全网稀缺。React17 发布的 Concurrent Mode 是React 前几年的努力方向,也是未来几年的发展方向。市面上目前还没有 React17 源码级别的课程。

辅助资料完备,课程配备了配套电子书《React技术揭秘》、丰富的在线Demo、实战练习。

“自顶向下”的授课方式,符合人类认知的过程。如果说别的源码分析课程是“高级”难度,那么本课程只有“中级”难度。原因在于课程使用“自顶向下”的授课方式,更符合人类认知的过程。

课程大纲

理念篇:React的设计理念及架构体系

React的设计理念

为了满足设计理念,这些年React架构的演进历程

新的React架构是如何设计的

架构篇:React架构的工作流程

React架构render阶段的完整流程

React架构commit阶段的完整流程

实现篇:具体功能的源码实现

Diff算法的实现

状态更新相关API的实现

Hooks的实现

Concurrent Mode的实现

章节目录:

第一章:理念篇

1.1 如何学习React源码

8 分钟

公开课

1.2 设计理念

8 分钟

1.3 架构的演进史

9 分钟

1.4 React新架构—Fiber

9 分钟

1.5 Fiber架构工作原理

10 分钟

1.6 如何调试源码

6 分钟

1.7 源码的目录结构

第二章:架构篇之render阶段

2.1 架构工作流程概览

7 分钟

2.2 深入理解JSX

14 分钟

2.3 “递”阶段mount时流程

19 分钟

2.4 “归”阶段mount时流程

9 分钟

2.5 “递”阶段update时流程

17 分钟

2.6 “归”阶段update时流程

15 分钟

第三章:架构篇之commit阶段

3.1 流程概览

12 分钟

3.2 before mutation阶段

4 分钟

3.3 mutation阶段

13 分钟

3.4 layout阶段

14 分钟

第四章:实现篇之Diff算法

4.1 Diff算法流程概览

8 分钟

4.2 单一节点的Diff

12 分钟

4.3 多节点Diff

26 分钟

第五章:实现篇之状态更新

5.1 状态更新流程概览

11 分钟

5.2 优先级与Update

10 分钟

5.3 Update的计算

25 分钟

5.4 ReactDOM.render完整流程

10 分钟

5.5 this.setState完整流程

2 分钟

第六章:实现篇之Hooks

6.1 极简useState实现

18 分钟

6.2 useState与useReducer的实现

15 分钟

6.3 useEffect与useLayoutEffect的实现

17 分钟

6.4 useRef的实现

12 分钟

6.5 useMemo及useCallback的实现

4 分钟

第七章:实现篇之 Concurrent Mode

7.1 scheduler的工作原理及实现

20 分钟

7.2 lane模型的工作原理

6 分钟

7.3 异步可中断更新与饥饿问题

22 分钟

7.4 batchedUpdates的实现

14 分钟

7.5 高优先级更新如何插队

11 分钟

7.6 Suspense的实现

18 分钟

历史上的今天
05月
21
    抱歉,历史上的今天作者很懒,什么都没写!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。