前言

本小书大部分内容来自作者 Jokcy 《React 源码解析》: https://react.jokcy.me/

本文已同步在我的掘金: https://juejin.im/post/5cc6e2846fb9a032374f58f8

感谢 Jokcy 让我深度了解 React。如他所说,在决定阅读 React 源码时认为不会是一件很难的事,但是真正开始阅读之后才发现,事情没那么简单,因为需要足够的耐心、能够独立思考和静下心来(因为你会碰到之前编码没有见过的写法和概念等等)。

干嘛学习源码

  • 更好地帮你理解自己写的代码是如何运行的;
  • 遇到 bug 时,能帮你从底层去思考并解决问题;
  • 在开始一个新项目之前,想好更好的架构方式;
  • React 设计细节都是很高明的,学习它有助于提升自身编码能力;
  • 互联网寒冬期间,熟悉并可以精通某个技能,可大大提升自己的竞争力,成为升职加薪的基础;

React 特色

无比纯粹

它是一个非常纯粹 UI = fn(x) 的框架,通过 state 映射 UI 的方式来屏蔽 DOM 操作,业界的框架也大抵如此。为什么说 React 纯粹呢?那是因为的 api 设计,核心 api 就是 setState,其余主要内容都围绕组件化来设置,没有 React 双向绑定以及其他 api,要改变一个 UI 只能通过 setState 来改变状态,这就成为了 React 无比纯粹的开发体验。

思想超前

React16 版本是完全重写了 React 代码,但是对于使用者来说是无感知的,光这一点就优秀无比了,不像 vue 或 angular 更新大版本需要调整兼容。更优秀的还在后面,React16 版本引入了Fiber概念,从根本上解决了 js 单线程运行问题。就比如计算量过大,就可能导致动画卡针和交互卡顿等问题。

章节目录部署

第一章 React API

  • createElement;
  • createContext;
  • JSX => JS;
  • ConcurrentMode;
  • Ref;
  • Component;
  • Suspense;
  • Hooks;

第二章 React 创建更新

  • ReactDom.render;
  • Fiber;
  • UpdateQueue;
  • FiberRoot;
  • expirationTime;

第三章 React 调度过程(Fiber Scheduler)

  • scheduleWork;
  • batchedUpdates;
  • performWork;
  • performUnitOfWork;
  • requestWork;
  • react scheduler;
  • renderRoot;

第四章 React 开始更新

  • beginWork 以及优化;
  • 各类组件的更新过程;
  • 调和子节点的过程;

第五章 React 更新后的操作

  • completeUnitOfWork;
  • completeWork;
  • unwindWork;
  • 虚拟 DOM 对比;
  • 错误捕获处理;
  • 完成整棵树更新;

第六章 提交更新,UI 更新

  • commitRoot 整体流程;
  • 提交快照;
  • 提交 DOM 更新;
  • 提交所有声明周期;
  • 开发时的帮助方法;
  • 提交 DOM 插入;
  • 提交 DOM 删除;

第七章 各种功能的实现过程

  • context 的实现过程;
  • ref 的实现过程;
  • hydrate 的实现过程;
  • React 的事件体系;

第八章 Suspense

  • 更新优先级的概念
  • Suspense 组件更新
  • retry 重新尝试渲染
  • 更新挂起的概念
  • timeout 处理
  • lazy 组件更新

Hooks

  • 核心原理
  • useState
  • useEffect
  • useContext
  • 其他 Hooks API

重点篇幅

  • Fiber
  • Update
  • Scheduler
  • React.Children.map

后面会附流程图辅助学习

需要你做什么

  • 足够耐心:React 的 Fiber 重构前后花了 3 年,看源码不会 3 周就看完了,所以你要有足够耐心;
  • 思考再思考:自我验证;
  • 善于提问和记笔记:不要留着问题不解决,因为终有一天你还是碰到它;

通读源码意义所在

外在 内在
提高开发能力 提高学习能力
解决问题能力 提高思考能力
提升自身价值 提升设计能力

适合人群

  • React 开发者
  • 想要参与开源项目
  • 想要成为高级开发

你还可以

下一篇:React 源码解析之总览