weixin_46463785的博客

本节是整个React 的源码与原理解读解读教程的最后一章，作者会用自己的理解带着大家梳理一下整个 React 的运行过程，因为篇幅的问题，作者会主要讲述一下一下重点的内容和要点的信息，侧重给读者一个完整的运行逻辑，对于讲解不到位的部分可以阅读之前的详细教程，教程肯定还是会有疏漏的部分请大家海涵

这个章节是 React 源码系列的最后一个章节了，主要来讲我们用于跨多层级通信的常用 hooks —— useContext，我们会从 context 的创建和消费讲起，再讲到怎么样使用 useContext 这个钩子来简化操作，最后分析 context 的运行原理和挂载过程。

这个章节主要讲解React 的 useLayoutEffect 和 useEffect 这两个 api，它们也是我们常用的 hooks，这两个 api 常被我们用来作为函数组件的生命周期来使用，用于处理我们副作用相关的内容，这篇我们就来看看他们的原理，以及在源码中运行作用的方式

这个章节主要讲解React 的 useState 和 useReducer 这两个 api，这是我们使用最多的 hook 了，他们允许我们在函数组件中也持有状态 state，然后对这个状态进行操作，这一章我们会从使用和源码两个角度深入讲解这两个 hooks

这个章节主要讲解React 的 useRef 这个 api，我们将从使用和源码两个角度来讲它，介绍它作为组件的全局变量和 DOM 引用两个场景下的使用和源码挂载，以及 React 一个和引用相关的 api —— forwardRef

从这个章节开始，我们将逐步讲解部分常用的 hooks，我会按照我们理解这些 hooks 的难度来讲解，本节主要讲解我们用于优化的useCallback 和 useMemo 两个 api，我们将从使用和源码两个角度来讲它：

这个章节和前面的部分相对独立，我们将来讲一下我们在 React 16.8 更新的新特性 **Hooks**，我们都知道 Hooks 的提出主要就是为了解决函数组件的状态问题而存在的，之前我们的 class 组件有状态，但是 function 组件没有，所以为了解决这个问题，hooks 诞生了。那么为了让我们的 hooks 挂在在整个 React 的生命周期中， React 是怎么样处理他们的呢，我们来看看这部分的内容：

这个章节是补充的章节，因为我突然发现将了 lanes 的时候提到了我们的 updateQueue ，我以前之前讲过了，结果发现之前因为涉及了大量 lanes 的内容所以没讲，那么在将 hooks 之前，我们补充一篇 updateQueue 以及相关操作的讲解，这篇会让你在我学习**lanes ** 系统之后，对于我们怎么样依赖 lanes 系统进行我们的更新有更深刻的了解

在之前的章节中，我们主要分析了 **Scheduler ** 系统是怎么样调度我们的渲染任务的，他主要用于判断在一批任务的执行过程中，我们什么时候要把进程还给我们的浏览器；而这一篇我们要谈到我们 React 中的了一个套优先级系统 —— lanes，这套系统主要用于我们讨论优先级低的任务执行过程中是不是一个被打断，转而执行优先级更高的任务。

在之前的章节中，我们主要分析了 React 怎么样从我们编写的 jsx 代码变成我们看得到的 DOM 元素，我们在讲解过程中为了能连贯的讲解，留下了很多的坑没填，一部分就是关于进程调度的，这一节我们就要填上这些坑。这节我们先讲React 中的 **Scheduler ** 系统是怎么样调度我们的渲染任务的，它怎么样计算任务的运行时间、调度任务的运行顺序以及怎么样恢复被中断的任务

本节的我们将谈谈 **commit** 中 React 的操作，因为在之前的教程中，我们已经讲到了 React 怎么样把 element 节点变成 Fiber 树，怎么样通过 DIFF 算法更新我们的 Fiber 树，那么现在我们需要将我们的 Fiber 树的更新同步到我们的真实 DOM 上展示给用户，这个阶段就是 Commit 阶段

本节的我们将从 上一节留下的问题出发，谈谈 **reconcileChildren()** 中怎么样最终生成 fiber 结点，其中我们会谈到 React 核心的 **DIFF 算法**，他的核心 —— 复用怎么实现，同时他是怎么样把比较的时间复杂度进行了优化

本节的我们将从 上一节留下的问题出发，谈谈 **beginWork ()** 中怎么样把一个 element 节点变成一个 fiber 结点，其中我们会提到我们的 **beginwork 怎么样处理更新和首次渲染**，通过什么样的方式来加速渲染，以及**对于不同类型的节点使用怎么样不同的逻辑**

本节的我们将从 上一节留下的问题出发，谈谈 **render()** 中的 **updateContainer** 做了什么工作，他怎么样把 **传入进去的 DOM 元素变成我们的 Fiber 元素**。因为这部分涉及到大量进程调度的问题，我们暂时不谈论这些问题，只是简单谈谈从 **updateContainer** 开始到最后变成 Fiber 经历的一系列的函数链，以及他们分别做了什么工作，进程调度的全部内容我们会在之后详细谈谈

本节的我们将从 React 的入口函数出发，谈谈在 **render()** 之后，React 做了什么事情，这部分会涉及到我们怎么样**生成一个 Fiber 根节点以及一棵 Fiber 树**，然后将它 **挂载到真实 DOM 上** 的问题，所以需要您先阅读前两章的内容来了解什么是 Fiber

本节的内容我们将讲述React中的一个很重要的数据结构——**Fiber** ，本节先着重说明**什么是 Fiber 结构，它的数据结构是什么，以及 React 为什么要在 16.X 版本后引入 Fiber 结构**，之后的章节会讲述从 React Element 到 Fiber 树的过程以及 Fiber 树的生成和更新

这个专栏的写作是为了记录在阅读 React 源码和 React 源码构造思想的时候的心得体会编写的，这个专栏将从 React 的怎么样将一个 jsx 组件生成出对应的 DOM 出发，讲解 React 源码的运行原理和设计思路，组件的生命周期如何绑定，React 的虚拟DOM 为什么比真实的DOM 高效，并且简要谈谈 React Hooks 的设计。