memo与useMeomo

  在 React 的性能优化一直是开发过程中的一个重要方面，尤其是在构建复杂应用时。随着组件数量和复杂度的增加，React 会频繁地重新渲染组件，这可能会导致严重的性能瓶颈。为了避免不必要的重新渲染，React 提供了 memo 和 useMemo 这两个优化工具来避免不必要的渲染。

memo - 优化组件

是什么

memo 是一个高阶组件，用于优化函数组件的渲染性能。当你传递一个组件给 memo 时，它会记住该组件的渲染结果，只要该组件的 props 没有变化，就不会重新渲染该组件。这样就避免了因父组件重新渲染而导致子组件不必要的重复渲染。

哪里用

memo 适用于那些渲染开销较大的组件，或者其 props 不会频繁变化的组件。

如果一个组件的渲染不依赖于父组件的每次更新，使用 memo 可以有效减少不必要的渲染，提升性能。

怎么用

import { memo, useState } from 'react';

// 普通组件
const Child = ({ name }) => {
  console.log('Child rendered');
  return <div>{name}</div>;
};

// 使用 memo 优化
const MemoizedChild = memo(Child);

const Parent = () => {
  const [name, setName] = useState('Alice');

  return (
    <div>
      <MemoizedChild name={name} />
      <button onClick={() => setName('Bob')}>Change Name</button>
    </div>
  );
};

export default Parent;

在上面的示例中，Child 组件被包裹在 memo 中。

只有当 name prop 改变时，Child 组件才会重新渲染。

如果父组件的状态发生变化，但 name 没有变化，Child 组件就不会重新渲染。

自定义比较函数

默认情况下，memo 会通过浅比较来判断 props 是否变化。

如果需要更精细的控制，可以提供一个自定义的比较函数，来决定是否需要重新渲染。

const MemoizedChild = memo(Child, (prevProps, nextProps) => {
  return prevProps.name === nextProps.name; // 自定义比较
});

useMemo - 缓存计算结果

是什么

useMemo 是一个 React Hook，用于缓存计算结果。它接受一个函数和依赖数组作为参数，只有在依赖数组中的值发生变化时，才会重新执行该函数，否则会返回上一次计算的结果。useMemo 的主要作用是避免在每次渲染时执行复杂的计算，尤其是在一些不常变化的值上进行计算时，useMemo 可以有效提升性能。

哪里用

useMemo 适用于那些计算开销较大的操作，或者依赖于某些 prop 或 state 值的计算结果。

例如，列表筛选、排序、复杂数学计算等场景，都可以考虑使用 useMemo 来缓存计算结果。

怎么用

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

const ExpensiveComponent = ({ number }) => {
  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2;
  };

  // 使用 useMemo 缓存计算结果
  const result = useMemo(() => expensiveCalculation(number), [number]);

  return <div>Calculated result: {result}</div>;
};

const Parent = () => {
  const [number, setNumber] = useState(1);

  return (
    <div>
      <ExpensiveComponent number={number} />
      <button onClick={() => setNumber(number + 1)}>Increment</button>
    </div>
  );
};

export default Parent;

在这个例子中，expensiveCalculation 函数是一个开销较大的计算，useMemo 会确保只有在 number 改变时才会重新计算结果。如果 number 没有变化，useMemo 会返回之前缓存的结果，避免重复计算。

小结

• memo 是对组件的优化，它决定是否重新渲染一个组件。
• useMemo 是对计算结果的优化，它缓存某个值的计算结果，只有依赖项变化时才重新计算。