在自定义钩子中使用useCallback和useMemo的要点

Question

我有一个简单的自定义钩子，它返回一些函数：

const useCustom = () => {
   const someReduxValue = useSelector(...);

   const fn1 = useCallback(() => { 
     // do something with someReduxValue
   }, [...]);

   const fn2 = useCallback(() => { 
     // may include some complex operations like reducing/mapping etc
   }, [...]);

   return useMemo(() => ({
      fn1,
      fn2,
   }), [...]);
};

我的问题是:将每个函数(fn1, fn2)封装到useCallbacks中，然后将所有哪些钩子返回到useMemo中有什么好处吗？

注意事项：在这个钩子中没有使用状态。

Answer 1

这完全取决于你的功能。

useMemo和useCallback必须小心使用，因为它填满了内存！

useMemo返回一个回传的值。例如:您有一个函数来检查这个数字是否是素数？这个功能考试编号9851812358！这是一个很大的数字检查，并假设在每一个改进机，这个函数检查这个巨大的数字质数！

useMemo回传了这个值(不管是素数还是素数)，在重呈现中只返回最后的结果，并且不会一次又一次地计算这个数字。

useMemo回传值，但useCallback返回回传回调！

Reactjs Docs：

将返回回调的回忆录版本，只有在某个依赖项已更改时才会进行更改。这在将回调传递到依赖引用相等以防止不必要呈现(例如shouldComponentUpdate)的优化子组件时非常有用。

现在。您应该决定您的函数是否需要useMemo和useCallback！