React 性能优化 - 父组件更新时，子组件不进行不必要的更新

搬砖也快乐

已于 2023-07-19 22:28:58 修改

阅读量2.2k

点赞数 2

分类专栏： React知识文章标签： react.js javascript 前端

于 2023-07-14 15:53:13 首次发布

本文链接：https://blog.csdn.net/jialiang808/article/details/131725478

版权

5 篇文章 1 订阅

订阅专栏

使用 PureComponent 或 shouldComponentUpdate：在子组件中，可以使用 PureComponent 类或手动实现 shouldComponentUpdate 生命周期方法来进行浅比较。这样可以避免在父组件更新时进行不必要的子组件渲染。PureComponent 会对组件的 props 和 state 进行浅比较，而 shouldComponentUpdate 方法可以自定义比较逻辑。
使用 React.memo：React.memo 是一个高阶组件，用于包装函数组件，并根据传入的 props 进行浅比较。如果组件的 props 没有变化，React.memo 将返回之前缓存的结果，避免不必要的组件重新渲染。
使用 useCallback 和 useMemo：useCallback 和 useMemo 是 React Hooks 提供的钩子函数，用于优化函数组件的性能。useCallback 可以缓存回调函数，以便在依赖项不变时避免函数的重新创建。useMemo 则用于缓存计算结果，以避免在每次渲染时重新计算。
使用 React Context：如果子组件只依赖于特定的上下文数据，而不依赖于父组件的其他数据，您可以将这些数据提升到上下文中。这样，当父组件更新时，子组件不会自动更新，因为它们只关注上下文数据的变化。
使用 React.Fragment 或组件片段：在父组件中，使用 React.Fragment 或组件片段来包装子组件列表。这样可以避免创建多余的 DOM 节点，并且在更新父组件时，不会触发子组件列表的重新挂载。

对于 React 组件的优化，通常采取的策略包括：

避免不必要的渲染：使用 shouldComponentUpdate 或 React.memo（或 PureComponent）来避免不必要的组件渲染。
使用虚拟化技术：对于大型列表或表格等，可以采用虚拟化技术（如 react-virtualized 或 react-window）来优化性能。这样可以大大减少 DOM 元素数量，提高性能和渲染速度。
分割组件：将大型组件分割成更小的子组件，提高组件的可维护性和性能。
合理使用状态管理：使用合适的状态管理工具（如 Redux、Mobx 等）来管理组件状态，避免状态混乱和不必要的渲染。
使用异步加载：使用 React 的 Suspense 和 lazy 来实现组件的异步加载，提高首屏加载性能。
使用 key 属性：在渲染子组件列表时，为每个子组件指定唯一的 key 属性。这样 React 可以根据 key 来识别子组件的变化，并进行有效的更新，而不是重新创建和销毁子组件。
使用不可变数据：当列表数据量较大时，使用不可变数据结构，例如使用 Immutable.js 或类似的库来处理列表数据。通过使用不可变数据，您可以在更新数据时创建新的不可变对象，而不是直接修改原始对象。这样可以更容易地检测到数据的变化，并避免不必要的重新渲染