介绍React中三个hooks方法memo useCallback useMemo的作用及使用场景示例
- 一、React.memo()：用来控制函数组件的重新渲染，将组件作为参数，函数的返回值是一个新的组件。
- 二、React.useCallback()：将回调函数及依赖项数组作为参数传入；
- 三、React.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>);
};
每点击一次，子组件的useState、props和context都没有改变，但是每点击一次子组件都会重新渲染
解决办法：将memo函数包裹子组件
import { memo } from "react";
const Child = memo(() => {console.log("我是子组件", "渲染了");return <div>我是子组件</div>;
});
二、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>);
};
每点击一次父组件的按钮，子组件都会重新渲染；
原因：
- 点击父组件按钮，父组件中 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);}, []);
三、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>);
};
每点击一次父组件的按钮，子组件都会重新渲染；
原因：
- 点击父组件按钮，父组件重新渲染；
- 父组件重新渲染时，会重新生成一个新对象userInfo ，即传给子组件的 userInfo 属性发生了变化，导致子组件渲染；
解决办法：使用 useMemo 将对象属性包一层。
注意: 如果直接使用useState解构的userInfo, 子组件将不会重复渲染，即使用const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });。
const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);
四、结论
- useMemo返回的是一个变量的值，useCallback返回的是一个函数。
- useMemo就是作为一个值来使用的，而useCallback则是被绑定的onClick，作为要执行的函数。
- useCallback和useMemo主要用来做数据缓存，它们的更新依赖于第二个参数是否发生了变化。因此当我们的render重复渲染时，只要我们的useMemo和useCallback的第二个参数值没有发生变化，useMemo和useCallback则不会执行第一个参数里的函数。
- 当父组件重新发生render的时候，子组件接受父组件的自定义方法，如果我不希望子组件发生变化，那么就需要用useCallback包裹父组件的自定义函数；
)
