请教一个 react hook 的问题

30次阅读

共计 640 个字符，预计需要花费 2 分钟才能阅读完成。

关于 react 的 useEffect，如果我要监听一个值，并且在值变化的时候做一些函数调用

  useEffect(()=>{if(type === aaa){aHandle();
    }else if(type === bbb){bHandle();
    }
  }, [type])

那我就需要把 aHandle 和 bHandle 放入依赖项中, 否则 eslint 或者 sonarlint 会报警告

  useEffect(()=>{if(type === aaa){aHandle();
    }else if(type === bbb){bHandle();
    }
  }, [type, aHandle, bHandle])

那这样岂不是每次 render，都会重新生成新的 ahandle 和 bHandle，每次都会触发 useEffect 吗？

我知道有 useCallback 和 useRef 可以解决函数在每次 render 都重新生成的问题，但问题是假如我在 aHandle 里去调接口，也要获取很多放在 state 中的值作为参数，那么 useCallback 还得把那些值全部放在 useCallback 的依赖项里，搞得越来越复杂了。

难道只能用 useRef 或者基于 useRef+useCallback 封装的一些 hook，把每个 aHandle 或者 bHandle 给套上吗。

有没有更优雅一点的写法，我想要有一个 useXXXEffect, 可以只监听一个 type，在这里面获取到的其他值都是最新的，不再额外需要传入 aHandle 或者 bHandle。

有没有这样的 hook 或者封装成这种效果的 hook

正文完