Question

所以我有这个小片段：

const useTest = (callbackFunc) => {
    const user = useSelector(selector.getUser); //  a value from store

    useEffect(() => {
      if (user.id === 1) {
         callbackFunc()
      }
    }, [callbackFunc, user.id])

}

在上面的代码中，如果callbackFunc在传递之前没有被记忆（包装在useCallback中），则useEffect将触发无限循环。

将函数包装在钩子上的useCallback上仍会触发无限循环，因此为否：

const cb = () => useCallback(() => callbackFunc, [callbackFunc]);

以上所述将触发infite循环，因为callbackFunc。

是我很清楚，我可以在传递给该钩子之前将函数包装在useCallback内，我唯一的问题是：很可能其他/将来的开发人员在调用此Hook时只会传递一个非记忆函数，这让我感到担忧。 `

由于callbackFunc规则，我无法删除useEffect / useCallback的第二个参数数组上的exhaustive-deps-并且删除它（或在此行上）也是被高级开发者禁止。

有什么想法可以实现我的目标吗？如果没有，我只是祈祷其他开发人员在使用它之前先阅读该钩子。

Answer 1

您可以执行类似的操作，但是您将无法再修改回调

const funcRef = React.useRef(null)
useEffect(() => {
 funcRef = callbackFunc
}, [])

useEffect(() => {
   if (funcRef.current){
    if (user.id === 1) {
      funcRef.current()
    }
   }
}, [funcRef, user.id])

有没有办法记住从参数传递的函数-（useCallback）详尽的后视

1 个答案: