手写React18源码,迈向高阶开发

js 复制代码
/****************************** 微信公众号:杨艺韬 ****************************/
/****************************** 网站:www.yangyitao.com ****************************/
/****************************** 课程地址:慕课网(https://coding.imooc.com/class/650.html) ****************************/

React源码,特别是React18的源码,对于大部分前端工程师而言都是很难以理解的。加之市面上的很多源码解析相关资料也只是分析源码实现的表像,缺乏对背后规律的探索,这进一步加剧了大家关于源码难学的认知。在这种背景下,我录制了一门手写React18源码的课程,本课程高度还原了React18的核心实现,函数名、调用关系、文件名、目录名都和原版源码保持高度一致,可以说这是源码学习最顶级的方式了,在这里把这门课程介绍给大家,希望能对各位的职业生涯带来积极影响。

课程目标

  • 宏观上 ,掌握React18源码结构和核心概念
  • 微观上 ,掌握React18源码的实现细节

配套资料

视频:React18内核探秘:手写React高质量源码迈向高阶开发

代码:仓库地址,需先购买视频课程

文档:官方文档

视频中有些地方直接访问了官方文档的地址,但官方文档进行了更新,界面发生了不少变化,但并不影响我们的学习

电子书教程主要承载一些理论知识 ,以及一些关键概念和参考资料,和视频小节一一对应,视频主要承载代码的演化过程

知识范围

我们可以将本课程源码学习的知识范围总结为三大块内容:

  • React核心原理
  • React事件与状态管理
  • React架构

React核心原理

React核心原理相关知识,是指React不会轻易发生变化的内容,是其之所以存在的基础原理:

  • 组件生命周期
  • 虚拟DOM实现
  • Diff算法
  • 组件渲染与更新
  • Hooks机制

这些内容除了Hooks,可以说是React一诞生到现在都存在的东西,甚至是Hooks也可以认为是函数组件的增强,从这个角度讲,也能说是一开始就存在的内容。

React事件与状态管理

至于React事件与状态管理,可以理解为和用户的交互相关的内容,包括:

  • 事件代理机制
  • 自定义事件系统
  • setState工作原理
  • 状态更新处理
  • props与state

React架构

至于React架构,可以说是React18最重要的组成部分,我们前面说React核心原理部分的内容是不会轻易发生变化的,那React架构则是与时俱进的,对于React18来讲,React架构包括的主要知识点如下:

  • Fiber系统
  • Concurrent模式
  • Lane模型
  • 调度系统
  • 时间切片

课程安排

课程总体上采取了自行向下的授课方法,体现在我们的课程分为上下两个部分,上半部分手写手写实现了一个最精简的贴合React最初形态的版本,这帮助我们树立了基本的React世界观。有了这个认知,我们再手写实现相对复杂的React18源码,理解起来更容易接受。

讲授方式

在具体的章节内容的讲解过程中,采取了理论实践相结合的讲课方法,先从原理上剖析再进入实现细节,由浅入深,遵循着应用实践->原理剖析->源码实现的讲述过程,即从实践中来,再到实践中去,比如先用一个应用案例来展示某一个功能的效果,然后剖析其底层原理,最后实现该部分源码。希望通过这样的授课方法,能够让大家更容易理解相对复杂的源码内容。

课程收获

  • 对React的理解更加深刻,面试更具竞争力
  • 快速定位工作中遇见的bug,提升工作效率
  • 个人技术整体实力提升
  • 掌握读源码的方法,具备写源码的能力

学习前提

学习这门课程需要具备一些前提条件,比如:

  • 具备React事件经验
  • 有原生JavaScript功底
  • 热爱前端开发,有探究精神

课程优势

市面上有那么多源码剖析相关资料,为什么选择这门课,选择这门课程有什么样的优势呢?

  • 课程有深度,从0到1手写实现与官方源码相近的代码,而不是简单的demo级代码,可以说最顶级的源码学习方式
  • 注重总结源码背后的规律,授人以鱼,也授人以渔,比如在学习Fiber架构的时候,会分析性能在软件开发中的深刻意义(CPU、GPU资源的有限性),浏览器的渲染原理,不仅知道Fiber架构是什么,还要知道为什么有Fiber架构,又比如讲到任务优先级的时候,会从数据结构的角度进行分析,等等
  • 本电子书作为教材,辅助视频学习
  • 课程内容会随着React版本升级而更新,未来也会扩展更多内容

课程风采展示

老版本的DOMDIFF示意图:

React18Fiber架构下的DOMDIFF流程图:

Fiber树的演化:

Fiber架构下的Hooks示意图:

相关推荐
Json_1817901448026 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端