关于 useMemo 和 useCallback 的使用疑问
来源:14-9 使用useCallback做性能优化
内六角
2020-11-04
团队成员中对什么时候使用 useMemo 和 useCallback 存在分歧
function App () {
const [count, setCount] = useState(0);
// 对于需要传递到子组件的方法大家都没有疑问,需要使用 useCallback 包裹,保证每次本组件渲染后 goBack 句柄不变
const goBack = useCallback(() => {
console.log('点击返回');
}, []);
// ????疑问1: 这个函数仅在本组件中使用是否需要使用 useCallback 包裹
const addCount = () => {
console.log('点击增加按钮');
setCount(count => count + 1);
};
// ????疑问2: 类似这些变量是否需要使用 useMemo 包裹
const columns = [
{
title: "名称",
key: "1",
width: "35%",
align: "center",
},
{
title: "模块",
key: "2",
width: "15%",
align: "center",
},
...
...
];
return (
<div>
<Header goBack={goBack}>
<div>count: {count}</div>
<button onClick={addCount}>add button</button>
{columns.map((item) => {
return (
<div key={item.key}></div>
);
})}
</div>
);
}
这两个优化 hook 到底应该什么时候使用呢?
写回答
1回答
-
你这俩问题,其实是一个问题 —— 何时应该使用。
这是函数组件,每次渲染函数都会重新执行,重新返回一个 jsx 。
useMemo 和 useCallback 的作用就在于,让你可以不用每次渲染都执行一般,给你缓存起来。
例如,有一个函数中有网络请求,你不希望每次组件渲染都重新请求一次,那就用 useCallback 。
但看你的代码,这两个地方,都没有必要用,因为都是简单的运算,不会影响性能。
112021-08-23
相似问题