react中useMemo的使用场景

useMemo 是 React 的一个 Hook，用来优化性能，尤其是在计算复杂值时。它会记住（缓存）计算结果，只有在依赖项变化时才重新计算，避免不必要的重复计算。

import React, { useMemo } from 'react';

function Example({ num }) {
  // 使用 useMemo 来缓存计算结果
  const expensiveComputation = useMemo(() => {
    console.log('Performing expensive computation...');
    return num * 2;
  }, [num]); // 只有 num 改变时才重新计算

  return (
    <div>
      <p>Expensive Computation Result: {expensiveComputation}</p>
    </div>
  );
}

export default Example;

解释

注意事项

• useMemo 接受两个参数：

  1. 一个返回值的函数，用于计算你想要缓存的值（在上面的例子中是 num * 2）。
  2. 一个依赖项数组，只有当数组中的值变化时，useMemo 才会重新计算缓存的值（在上面的例子中是 num）。

• 注意：useMemo 只是在依赖项变化时重新计算，其他时候返回缓存的值。它并不会保证组件渲染时总是返回缓存值。React 本身会判断是否需要重新计算。
  二、useMemo 可以帮助避免在每次渲染时重复执行昂贵的计算，尤其是那些需要大量计算的复杂数据处理、排序、过滤等操作。

• import React, { useMemo, useState } from 'react';

  function App() {
    const [count, setCount] = useState(0);
    const [num, setNum] = useState(1);

    // 假设这个计算非常昂贵
    const expensiveValue = useMemo(() => {
      console.log('Computing expensive value...');
      return num * 1000;
    }, [num]); // 只有 num 改变时，才会重新计算

    return (
      <div>
        <p>Count: {count}</p>
        <p>Expensive Computed Value: {expensiveValue}</p>
        <button onClick={() => setCount(count + 1)}>Increment Count</button>
        <button onClick={() => setNum(num + 1)}>Change Num</button>
      </div>
    );
  }

  export default App;
   

  使用场景

• 避免不必要的渲染：当你有一些高计算的任务或者处理复杂数据时（如排序、过滤、图表计算等），使用 useMemo 可以避免这些操作每次渲染时都执行。

• 优化子组件渲染：当父组件渲染时，如果传递给子组件的 prop 通过 useMemo 缓存，只要依赖项不变，子组件就不会重新渲染。

• 不要过度使用：useMemo 适用于性能瓶颈场景，但不应过度使用。对于简单的计算，React 本身已经足够优化，因此如果没有实际性能问题，过度使用 useMemo 反而可能会增加复杂度。
• 依赖项管理：记得正确设置依赖项数组。如果依赖项没有正确更新，可能会导致渲染中的数据不一致问题。
• 有些类似于vue中的computed计算属性，会缓存计算结果

原文地址：https://blog.csdn.net/qq_42573767/article/details/143949309

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！