性能优化一直是前端领域讨论的一个热门问题,但在平时沟通及 code review 过程中发现很多人对于 React 中性能优化理解很模糊,讲不清楚组件什么时候更新,为什么会更新,关于 React 性能优化的文章虽然比较多,但大多数都是在罗列一些优化的点,本文将以 React 底层更新过程为基础,层层递进,将性能优化相关的用法、原理串联起来,让读者真正理解为什么需要性能优化以及如何使用。 更新流程 React 使得前端开发者不再跟 DOM 打交道,只需要控制组件及其状态来完成应用开发。React 在这背后做的最主要的工作就是 保持组件状态与用户界面的一致性 :将组件状态构建成用于描述用户界面的 UI Tree(或者叫 Virtual Dom)并反应到浏览器中,这也是 React 更新的一个最宏观的过程。 我们向下一层,看一下当更新发生时的具体过程。 如下图所示,假设用户蓝色的结点中发生了一次 onClick,对应组件触发了相...