请教一个 react hook 的问题

Asuler · 2024-3-29 10:34:07 · 489 次点击
关于 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
举报· 489 次点击
登录 注册 站外分享
35 条回复  
NessajCN 小成 2024-3-29 10:36:39
aHandle bHandle 不会每次 render 重新生成
weixind 小成 2024-3-29 10:40:43
使用 react-query 或者类似的东西。
sadyx 小成 2024-3-29 10:46:56
ahooks/useRequest 感觉可以满足你的需求
Nyeshuai 小成 2024-3-29 10:52:01
这个场景不需要 useEffect, 如果你需要根据某个值触发对应操作, 应该是在获取到 type 的位置调用对应函数, 即便有多个位置.
10bkill1p 小成 2024-3-29 10:53:26
react unforget
XFeng34 小成 2024-3-29 10:57:50
meta575 说的对,你没要实现这个功能的话,可以试试 ahooks 提供的 useMemoizedFn
lisianthus 小成 2024-3-29 11:03:09
我是这样这样处理的:每次渲染重新生成函数,然后用 ref 引用这个函数,这样的话函数就能获取到最新值,也不用把函数加到 useEffect 的依赖里,不知道有没有优雅的写法。

aHandleRef.current = () => {};

useEffect(() => {
  if (type === "a") {
    aHandleRef.current();
  }
}, [type])
sjhhjx0122 小成 2024-3-29 11:05:44
如果你的 type 是外部传进来的,其实你完全可以直接写不需要 useEffect
7anshuai 小成 2024-3-29 11:21:37
https://react.dev/reference/react/useEffect#removing-unnecessary-function-dependencies

把 aHandle 或 bHandle 函数定义放在组件外面或者 useEffect(() => { function aHandle() {} })
1234下一页
返回顶部