我可以使用useCallback或useMemo来缓存函数的结果吗?

让我们说一个组件内部有一个函数,例如:

     const MyComponent = ({data}) => {
       const myFunction = a => a+1;
       return <div>
                  data.map(num => myFunction(num))
              </div>
     }

如果已经使用相同的参数调用了 myFunction(),我不希望再次调用它。 在此处添加缓存的最佳做法是什么?

FY12325 回答:我可以使用useCallback或useMemo来缓存函数的结果吗?

否,在此特定情况下,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>
}
本文链接:https://www.f2er.com/2942985.html

大家都在问