一个hooks的问题

#1

使用 hooks 的时候用到了 useEffect 和 useState
比如我现在定义

const [a,setA]=useState(1)
const [b,setB]=useState(1)

useEffect 依赖的是 [a,b]
也就是

useEffect(()=>{
},[a,b])

这个时候我去触发一个函数

    setA(2)
    setB(2)
}

这个时候useEffect会触发一次，但是假如我把handle改一下

handle=async()=>{
    await sleep(1000)
    setA(2)
    setB(2)
}

这里的sleep是一个promise，这个时候这个函数执行完会触发两次useEffect，这个问题有哪位大佬能搞定或者指教一下

#2

你好，我注意到你的handle函数产生了副作用，考虑是否是使用useEffect，我也注意到当不加await执行就会正确，而await产生了promise。这只是一个思路，具体可以研究下，欢迎讨论

1 Like
#3

promise 进入事件循环微任务队列，让react批处理优化失效，举个类似在class里的例子

class A extends React.Component{
  // 触发一次
  change(){
     this.setState({a:1})
     this.setState({b:2})
  }
  // 触发两次
  changeTwice(){
     setTimeout(()=>{
         this.setState({a:1})
         this.setState({b:2})
    }, 0)
  }
}
2 Likes
#5

可以使用unstable_batchedUpdates 方法处理

handle=async()=>{
    await sleep(1000)
   unstable_batchedUpdates(() => {
    setA(2)
    setB(2)
  })   
}