javascript - 有没有办法记住从参数传递的函数 - (useCallback) exhaustive-deps

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 将触发无限循环。

将函数包装在钩子(Hook)内的 useCallback 上仍会触发无限循环，所以这是不对的:

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

因为 callbackFunc 以上会触发无限循环。

YES 我很清楚我可以在传递给这个钩子(Hook)之前将函数包装在 useCallback 中，我唯一的问题是:很有可能其他/ future 的开发者在调用这个钩子(Hook)时只会传递一个非内存函数，这就是我担心的地方。 `

由于 exhaustive-deps，我无法删除 useEffect/useCallback 第二个参数数组上的 callbackFunc > 规则 - 并删除它(或在这一行)也被更高的开发者禁止。

知道我怎样才能实现我的目标吗？如果没有，那么我会祈祷其他开发者在使用它之前先阅读钩子(Hook)。

Answer 1

你可以这样做，但你将无法再修改回调

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

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