React中memo的应用场景

useMemo 是一个用于性能优化的 Hook，它会记住（缓存）一个计算结果，只有在依赖项改变时才会重新计算这个结果。下面介绍几种常见的memo应用场景。

避免在父组件重新渲染时子组件不必要的重新渲染

看看下面的例子当setCount触发的时候，由于改变了count的值，所以在整个父组件中会重新渲染，从而导致子组件也会重新被渲染，触发'ChildComponent rendered',子组件在这里的渲染是多余的，没有必要的

javascript
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const user = { name: 'John', age: 30 }), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ChildComponent user={user} />
    </div>
  );
};

const ChildComponent = ( user ) => {
  console.log('ChildComponent rendered');
  return <div>{user.name}</div>;
};

在这种情况下就可以使用memo来进行优化

当父组件重新渲染时，可以使用 useMemo 来缓存子组件的 props，避免子组件不必要的重新渲染。

javascript
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const user = useMemo(() => ({ name: 'John', age: 30 }), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ChildComponent user={user} />
    </div>
  );
};

const ChildComponent = React.memo(({ user }) => {
  console.log('ChildComponent rendered');
  return <div>{user.name}</div>;
});

 

当使用 useState 更新状态时，React 会触发组件重新渲染。这是 React 的基本行为：任何时候组件的状态或 props 发生变化，组件都会重新渲染，以确保 UI 与当前状态保持一致。

没有使用memo的情况下，调用setCount父组件会重新渲染，导致子组件也重新渲染

避免在每次渲染时重复执行 缓存计算结果

比如这里 computeExpensiveValue 是一个复杂的逻辑运算，我需要在某些特定的情况下才让它执行，避免浪费不必要的资源，可以使用usememo来指定一个依赖项，当依赖项不变的情况下，函数不会执行

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [obj, setobj] = useState({ name: "123", test: { a: 1 } });
  const computeExpensiveValue = (a, b) => { // 复杂计算逻辑 return a + b; };
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [b]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>memoizedValue</button>
    </div>
  );
};

当我给依赖项指定为b的时候，那么函数就只会在b发生变化的时候再去执行，这里可以体现memo的第二个优点就是缓存结果

总结

• useMemo 可以用于减少子组件的重新渲染，提高性能，通过利用缓存传参的方式来进行优化
• 也可以用于缓存一个计算结果，只有在依赖项改变时才重新计算这个结果。适用于避免不必要的重复计算。

如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

原文：https://juejin.cn/post/7380195796207550464