react 性能专项

Author: hewking
Labels: blog
Created: 2025-06-10T07:37:14Z
Link and comments: https://github.com/hewking/blog/issues/67

基本概念

1. 组件与元素：组件是一个返回 React 元素的函数。元素是一个描述应在屏幕上显示的对象。
2. Re-renders：当状态改变时，React 会再次调用你的组件函数，并将返回的元素与之前的元素进行比较，以决定需要更新的 DOM。
3. The Big Myth: 许多开发者认为“组件在其属性改变时重新渲染。”这并不完全正确。组件在其父组件重新渲染时也会重新渲染，无论它们的属性是否改变——除非它们被包裹在 React.memo 中

优化方式

1. 移动状态向下：组合解决方案
   1. Uncle Bob 的《Clean Architecture》原则完美契合——特别是单一职责原则
2. 子组件作为属性：组合的力量
   1. children 作为属性
   2. Why This Works: Elements, Reconciliation and Props
      1. 当组件重新渲染时，React 调用你的组件函数并返回一个元素树
      2. React 使用 Object.is() 比较来将这个新树与上一个树进行比较。
      3. 如果元素引用在前后相同，React 可以跳过树该分支的重新渲染
3. 要点
   1. 理解渲染树：React 从状态变化发生的地方向下进行重新渲染。
   2. 将状态向下移动：尽可能将状态放置在真正需要它的组件附近。
   3. 使用组合模式：通过将组件作为 props 或 children 传递来防止不必要的重新渲染。
   4. 小心使用 hooks：它们不会隔离重新渲染；只是抽象了状态管理。
   5. 考虑记忆化最后：在优化组件结构后，仅使用 React.memo 、 useMemo 和 useCallback 。
4. useMemo & useCallback
   1. useMemo 和 useCallback 主要存在是为了帮助在重新渲染之间保持稳定的引用。它们缓存一个值，并且只有当指定的依赖项发生变化时才会重新计算
5. React’s reconciliation
   1. 元素类型是确定身份的主要因素
   2. 树中的位置很重要
      1. key 属性让开发者可以明确控制组件标识，覆盖 React 的默认基于位置的标识
   3. 当 React 需要更新 UI（在状态变化或重新渲染后），它会：
      1. 创建一个新的元素树，通过调用您的组件
      2. 将其与之前的树进行比较
      3. 确定需要执行哪些 DOM 操作才能使真实 DOM 与新的树匹配
      4. 执行这些操作高效

参考

1. 超越 React.memo：更智能的性能优化方法：Beyond React.memo: Smarter Ways to Optimize Performance
2. Kotlin 中UseCases 的使用案例
3. React.memo Demystified: When It Helps and When It Hurts 不要滥用 useMemo, useCallback
4. React Reconciliation: The Hidden Engine Behind Your Components
5. Dan:a-complete-guide-to-useeffect
6. 如何使用 useMemo 和 useCallback：你可以删除其中的大部分