`React` 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 `React`，它的生态功不可没。

本文使用「署名 4.0 国际 (CC BY 4.0)」 许可协议，欢迎转载、或重新修改使用，但需要注明来源。 现在 react 18 已经进入了快速迭代期 ...

众所周知，react diff算法是在更新时，根据state的更新，计算出变化的节点，再渲染。那么diff是通过什么和什么对比呢，又是如何对比的呢？ react做的就是对比上面的1和4，最终生成2，最后将2渲染到页面中。 diff算法就是发生在reconcile这个阶段，rec…

React Fiber是React核心算法的持续再实现，这是React团队两年多研究的成果。 React Fiber的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染：能够将渲染工作分割成块，并将其分散到多个帧中。 其他关键功能包括暂停、中止或重启更新工作的…

最近发布的React v17.0没有包含新特性。 究其原因，v17.0主要的工作在于源码内部对Concurrent Mode的支持。所以v17版本也被称为“垫脚石”版本。 本文会详细介绍Concurrent Mode的来龙去脉，以及这套体系从底层架构到上层API的实现。 由于跨…

React Hooks的基本用法，官方文档 已经非常详细。这是系列的第三篇，探讨一下 hooks 的实现机制。 前两篇文章已经分析过 useState 和 useEffect 的执行机制，想要更加深入的了解 hooks，可以根据 hooks 的相关特点，自己模拟实现一下相关的函…

我React团队工作的这段时间，很幸运能够看见 Jordan、Sebastian、Sophie 和其他团队成员是如何解决问题的。在本文中，我会把从他们身上学到的，浓缩为一篇较高层次的技术准则。这些准则未必详细。它们都是我对React团队的观察和整理 —— 其他团队成员或许有其他…

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。 类组件可以使用其他特性，如状态 state 和生命周期钩子。 当组件只是接收 pro…

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…