jiegiser博客

为什么需要 hookReact 文档中也有说明了 Hooks 的提出主要是为了解决什么问题的：组件之间复用状态逻辑很难。就以前 React 为了将一个组件的逻辑抽离复用，不和渲染代码混用在一个 class 的做法，比较推介的是用高阶组件，将状态逻辑抽离出来，通过不同的样式组件传入带有状态逻辑的高阶组件中，增强样式组件的功能，从而达到复用逻辑的功能。再早期就会使用 mixin 去实现。缺点：增加嵌套层级，代码会更加难以理解。复杂组件变得难以理解在使用 class 组件的时候，我们少不了在生命周

在 React 中触发更新的方式主要有以下几种：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，关于 hooks 的后面会专门写一篇文章分析。

render 阶段主要做什么在 render 阶段，React 可以根据当前可用的时间片处理一个或多个 fiber 节点，并且得益于 fiber 对象中存储的元素上下文信息以及指针域构成的链表结构，使其能够将执行到一半的工作保存在内存的链表中。当 React 停止并完成保存的工作后，让出时间片去处理一些其他优先级更高的事情。之后，在重新获取到可用的时间片后，它能够根据之前保存在内存的上下文信息通过快速遍历的方式找到停止的 fiber 节点并继续工作。由于在此阶段执行的工作并不会导致任何用户可见的更改，因为

Diff 算法是什么diff 是通过 JS 层面的计算，来对比两个虚拟 DOM 中变化的部分，并只针对该部分进行原生 DOM 操作，而非重新渲染整个页面，从而办证了每次操作更新后页面的高效渲染。​在 React 中 diff 算法通过对比两个虚拟 DOM ，返回一个 patch 对象，即补丁对象，在通过特定的操作解析 patch 对象，完成页面的重新渲染。​在上一节的 Fiber 架构提到，在 render 阶段更新 Fiber 节点时，我们会调用 reconcileChildFibers 对比 cu

Fiber 是对 React 核心算法的重构，facebook 团队使用两年多的时间去重构 React 的核心算法，在React16 以上的版本中引入了 Fiber 架构；​为什么需要 Fiber在 React15 及以前，Reconciler 采用递归的方式创建虚拟 DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。​为什么会造成卡顿，我们需要了解浏览器在一帧中都做了什么？​浏览器一帧会干什么我们知道，在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷

首先现在通过 react 17.0.2 创建新项目，会直接提示需要更新 api：![image.png](https://img-blog.csdnimg.cn/img_convert/bad51c755c14249c83849fcea625ca9d.png#clientId=ubf23d113-0a94-4&from=paste&height=51&id=u03d4414c&margin=[object Object]&name=image.png&orig

先上一张图，这是 React 团队作者 Dan Abramov 画的一张生命周期阶段图，可以看出 React 的生命周期主要分为两个阶段：render 阶段和 commit 阶段。​其中 commit 阶段又可以细分为 pre-commit 阶段和 commit 阶段；react 16 架构React 16 是重构了 React 15 的一个大版本；其相比 React 15 架构增加了 SchedulerReact16 架构可以分为三层：Scheduler（调度器）—— 调度任务的优先级，高优