使用 `useMemo` 优化 React 组件性能

月出
212 阅读3分钟

引言

自己做项目demo 的时候，基本上就是能跑就行，现在接触真实上线项目后，发现很多东西并不是代码实现就好，还需要考虑性能优化。

随着应用规模的增大，组件的重新渲染可能会成为性能瓶颈。下面学习一个新的 React Hook - UseMemo！React 提供的 useMemo 这个 Hook，可以帮助我们优化组件的性能，避免不必要的计算和重复渲染。

语法定义

useMemo 基本语法如下：

const memoizedValue = useMemo(() => {
  // ... code
  return calculatedValue;
}, [dependencies]);

我们需要给 useMemo 传递两样东西：

  1. 计算函数：一个没有任何参数的函数，返回值为想要缓存的计算结果。
  2. 依赖列表：一个数组，包含在计算函数中使用的所有变量。只有当这些依赖项发生变化时，useMemo 才会重新计算值。

简单来说，useMemo 就是帮我们记住某个计算结果，只有当依赖项变了，它才会重新算一遍。

使用效果

useMemo 的主要作用是缓存计算结果，避免在每次渲染时都进行重复计算。它的使用效果可以总结为以下几点：

  • 减少不必要的计算：当依赖项没有变化时，useMemo 会直接返回缓存的值，而不执行计算函数。
  • 优化子组件渲染：将 useMemo 的计算结果作为 props 传递给子组件时，可以避免子组件不必要的重新渲染，尤其是在子组件使用了 React.memo 进行优化的情况下。
  • 依赖项管理：useMemo 的计算结果可以作为其他 Hook 的依赖项，确保这些 Hook 只在必要时执行。

扩展场景

useMemo 的使用场景并不局限于简单的计算缓存。以下是一些常见的扩展场景：

1. 复杂计算优化

当组件中有一些复杂的计算逻辑，且这些计算的依赖项变化不频繁时，使用 useMemo 可以显著提升性能。

const expensiveCalculation = useMemo(() => {
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += i;
  }
  return result;
}, [dependency]);

2. 避免子组件不必要的渲染

当父组件重新渲染时，如果子组件的 props 没有变化，使用 useMemo 可以避免子组件不必要的渲染

const memoizedData = useMemo(() => {
  return { data: someData };
}, [someData]);

return <ChildComponent data={memoizedData} />;

3. 作为其他 Hook 的依赖项

useMemo 的计算结果可以作为其他 Hook 的依赖项，确保这些 Hook 只在必要时执行。

const memoizedValue = useMemo(() => {
  return calculateValue(dependency);
}, [dependency]);

useEffect(() => {
  // 仅在 memoizedValue 变化时执行
  doSomething(memoizedValue);
}, [memoizedValue]);

参考例子

以下是一个来自 React 官网的示例，展示了如何使用 useMemo 来优化一个计算过滤列表的组件：zh-hans.react.dev/reference/r…

(官网有直观的组件可以现场切换tab感受使用usememo的区别，但是实际上好像并没有什么区别，也有可能是数据量不够大？)

总结

useMemo 是 React 中一个强大的工具，能够帮助我们在组件渲染过程中优化性能。通过缓存计算结果，useMemo 可以减少不必要的计算和渲染，提升应用的响应速度。

avatar
文章
阅读
粉丝