现代 React 应用卡顿的主要原因是什么?组件库 vs 重渲染机制

React 自己的渲染机制决定的。

React 内部用链表维护了一个树，用来映射 DOM 和更多东西（比如 Context 、Portal 、Fragment 等这些），你每次更新 React 的状态，React 都会从顶开始检查这棵树的每个节点，如果节点上的数据变了，那么就运行这个节点对应的组件（就是你写的 React 组件）。


然后，你不写 Memo 、useMemo 的话，你的子组件就必然会跟着父组件的刷新而刷新，哪怕子组件的 Props 没变（为什么会这样？因为父组件传递给子组件的 Props 是一个对象，虽然这个对象的内容没变，但是对象自己不断的变）。

于是，你就会发现，React App 一定有超多的冗余执行，这就是为什么 React 慢的其中一个原因。

另外，React 那个树不是只遍历一遍的，他有时候还会回溯或者干脆从头再来。

就是这么个渲染机制，导致 React 很难写丝滑。

卡还是小问题，现在可以套 React Compiler ，问题是这个反复更新的渲染机制会让开发很复杂，比如 Effect 一多组件的行为就越难预测。

我是一边用，一边忍，一边推荐给别人... 因为生态比别的 UI 库繁荣太多太多了。