一个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