李飞 useCallback 和 useMemoe的用法
时间: 2024-04-13 15:10:09 浏览: 18
useCallback和useMemo都是React Hooks中的函数,用于优化组件性能。
useCallback用于缓存函数,避免组件重新渲染时函数被重新定义,从而提高性能。它接收两个参数,第一个参数是一个函数,第二个参数是一个依赖数组,当依赖数组中的值发生变化时,才会重新缓存函数。
示例:
```
import React, { useCallback } from 'react';
function MyButton({ onClick, children }) {
const handleClick = useCallback(
() => {
onClick();
},
[onClick],
);
return <button onClick={handleClick}>{children}</button>;
}
```
在上面的例子中,handleClick函数会被缓存,只有当onClick函数发生变化时,才会重新缓存。
useMemo用于缓存计算结果,避免组件重新渲染时计算重复的结果,从而提高性能。它接收两个参数,第一个参数是一个函数,用于计算结果,第二个参数是一个依赖数组,当依赖数组中的值发生变化时,才会重新计算结果。
示例:
```
import React, { useMemo } from 'react';
function MyComponent({ a, b }) {
const result = useMemo(
() => {
console.log('compute result');
return a + b;
},
[a, b],
);
return <div>{result}</div>;
}
```
在上面的例子中,result变量会被缓存,只有当a或b发生变化时,才会重新计算结果。