设为首页 收藏本站
开启辅助访问 切换到宽版 快捷导航
菜单

编辑推荐

思否编程-自顶向下学 React 源码

206
回复
5086
查看
  [复制链接]

655

主题

662

帖子

19万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
199975
发表于 2023-8-11 20:23:31 | 显示全部楼层 |阅读模式
思否编程-自顶向下学 React 源码
主讲:卡颂课时:七章
在业务之外,前端还有很多富有挑战与机遇的领域,包括但不限于:全栈、移动端、工程化、可视化、框架开发。熟练完成业务并且深入前端某一领域,也是“资深前端工程师”必须掌握的能力。在这些领域中,与我们日常开发关系最密切的,便是“框架开发”了。
售价 : 37金钱
提取码 : 购买后方可查看

课程介绍



思否编程-自顶向下学 React 源码

课程收获
学习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的实现
试看链接:https://pan.baidu.com/s/1ZtwoUbGS7e2uNYBhXbLhEQ?pwd=dvym

章节目录:
第一章:理念篇

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 分钟



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

633

帖子

1272

积分

金牌会员

Rank: 6Rank: 6

积分
1272
发表于 2023-8-12 03:38:00 | 显示全部楼层
我也是刚开的终身会员嘿嘿
回复

使用道具 举报

0

主题

625

帖子

1256

积分

金牌会员

Rank: 6Rank: 6

积分
1256
发表于 2023-8-12 09:24:28 | 显示全部楼层
学习了,不错,讲的太有道理了
回复

使用道具 举报

0

主题

632

帖子

1270

积分

金牌会员

Rank: 6Rank: 6

积分
1270
发表于 2023-8-12 12:08:15 | 显示全部楼层
我在你们家刚开的终身会员,希望以后合作愉快!谢谢
回复

使用道具 举报

0

主题

628

帖子

1262

积分

金牌会员

Rank: 6Rank: 6

积分
1262
发表于 2023-8-12 14:14:09 | 显示全部楼层
有竞争才有进步嘛
回复

使用道具 举报

0

主题

623

帖子

1253

积分

金牌会员

Rank: 6Rank: 6

积分
1253
发表于 2023-8-12 16:45:19 | 显示全部楼层
我抢、我抢、我抢沙发~
回复

使用道具 举报

0

主题

620

帖子

1246

积分

金牌会员

Rank: 6Rank: 6

积分
1246
发表于 2023-8-12 21:03:57 | 显示全部楼层
路过,支持一下啦
回复

使用道具 举报

0

主题

622

帖子

1250

积分

金牌会员

Rank: 6Rank: 6

积分
1250
发表于 2023-8-13 11:34:01 | 显示全部楼层
我来帮你顶一下吧,虽然我没有学习这门课程哈哈
回复

使用道具 举报

0

主题

623

帖子

1251

积分

金牌会员

Rank: 6Rank: 6

积分
1251
发表于 2023-8-13 15:37:48 | 显示全部楼层
过来看看的
回复

使用道具 举报

0

主题

630

帖子

1265

积分

金牌会员

Rank: 6Rank: 6

积分
1265
发表于 2023-8-13 16:17:19 | 显示全部楼层
我来的是不是有点晚?这么热闹的一个论坛我竟然今天在发现!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则