【React】memo()、useCallback()、useMemo()的区别及使用场景

一、React.memo()：用来控制函数组件的重新渲染，将组件作为参数，函数的返回值是一个新的组件。

import { useState} from "react";
const Child = () => {
  console.log("我是子组件", "渲染了");
  return <div>我是子组件</div>;
};
export const Parent = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child />
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

每点击一次，子组件的useState、props和context都没有改变，但是每点击一次子组件都会重新渲染

解决办法：将memo函数包裹子组件

import { memo } from "react";
const Child = memo(() => {
  console.log("我是子组件", "渲染了");
  return <div>我是子组件</div>;
});
1
2
3
4
5

二、React.useCallback()：将回调函数及依赖项数组作为参数传入；

• 它的主要作用是缓存一个回调函数，以确保在组件重新渲染时不会创建新的回调函数，从而减少不必要的性能开销。useCallback 通常与 React.memo 或 shouldComponentUpdate 一起使用，以避免不必要的组件重新渲染。

import { useState,memo } from "react";
const Child =  memo((props: { name: string; onClick: Function }) => {
  const { name, onClick } = props;
  console.log("我是子组件", "渲染了");
  return (
    <>
      <div>我是子组件=》{name}</div>
      <button onClick={() => onClick("修改父组件传过来的参数")}>改变 name 值</button>
    </>
  );
});
export const Parent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("向子组件传递参数");
  const increment = () => setCount(count + 1);
  const onClick = (name: string) => {
    setName(name);
  };
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child name={name} onClick={onClick} />
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

每点击一次父组件的按钮，子组件都会重新渲染；

原因：

• 点击父组件按钮，父组件中 count 改变，进而导致父组件重新渲染；
• 父组件重新渲染时，会重新创建 onClick 函数，即传给子组件的 onClick 属性发生了变化，导致子组件渲染；
• 如果传给子组件的props只有[基本数据类型](https://blog.csdn.net/m0_61049675/article/details/135815841)，子组件将不会重新渲染。

解决办法：修改父组件的 onClick 方法，用 useCallback 钩子函数包裹一层。
注意: 如果直接使用useState解构的setName传给子组件, 子组件将不会重复渲染，即使用<Child name={name} setName={setName} />：

  const onClick = useCallback((name: string) => {
    setName(name);
  }, []);
1
2
3

三、React.useMemo()：将“创建”函数和依赖项数组作为参数传入；

import { useState,memo } from "react";
const Child =  memo((props: { userInfo: { name: string; age: number } }) => {
  const { userInfo} = props;
  console.log("我是子组件", "渲染了");
  return (
    <>
      <div>我是子组件=》{userInfo}</div>
      <button>改变 name 值</button>
    </>
  );
});
export const Parent = () => {
  const [count, setCount] = useState(0);
  const userInfo = ({ name: "小明", age: 18 });
  const increment = () => setCount(count + 1);
  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child userInfo={userInfo}/>
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

每点击一次父组件的按钮，子组件都会重新渲染；

原因：

• 点击父组件按钮，父组件重新渲染；
• 父组件重新渲染时，会重新生成一个新对象userInfo ，即传给子组件的 userInfo 属性发生了变化，导致子组件渲染；
  解决办法：使用 useMemo 将对象属性包一层。
  注意: 如果直接使用useState解构的userInfo, 子组件将不会重复渲染，即使用const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });。

const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);
1

四、结论

• useMemo返回的是一个变量的值，useCallback返回的是一个函数。
• useMemo就是作为一个值来使用的，而useCallback则是被绑定的onClick，作为要执行的函数。
• useCallback和useMemo主要用来做数据缓存，它们的更新依赖于第二个参数是否发生了变化。因此当我们的render重复渲染时，只要我们的useMemo和useCallback的第二个参数值没有发生变化，useMemo和useCallback则不会执行第一个参数里的函数。
• 当父组件重新发生render的时候，子组件接受父组件的自定义方法，如果我不希望子组件发生变化，那么就需要用useCallback包裹父组件的自定义函数；