让我们说一个组件内部有一个函数,例如:
const MyComponent = ({data}) => {
const myFunction = a => a+1;
return <div>
data.map(num => myFunction(num))
</div>
}
如果已经使用相同的参数调用了 myFunction(),我不希望再次调用它。 在此处添加缓存的最佳做法是什么?
答案 0 :(得分:0)
否,在此特定情况下,useCallback和useMemo具有不同的用途,读为here,您需要自己创建某种缓存机制或从第三者包中获取一种:
const MyComponent = ({data}) => {
const cacheRef = React.useRef({})
const myFunction = a => {
const cache = cacheRef.current;
if(cache[a]){
return cache[a];
} else{
cache[a] = a+1;
return cache[a];
}
};
return <div>
{data.map(num => myFunction(num))}
</div>
}