Question

 const [count,setCount]=useState(5)
useEffect(()=>{

setCount(10)},[count])

在上面的代码中，如果我没有异步操作就更新状态，则useEffect不会进入infite循环。虽然在下面的代码中，如果我通过asysnc操作来更新状态，它会进入infite循环，有人可以告诉我useEffect在是异步操作吗？

const [count,setCount]=useState(5)
useEffect(()=>{
//some async operation
.then(response)=>{
setCount(response.data)}},[count])

Answer 1

这是因为数字通过引用与值和对象进行比较。每次异步操作导致引用新对象时，都会触发useEffect。

如果像setCount(5)这样的数字将不会再次触发，因为第二次5与先前的变量相同。

Answer 2

那是个好问题！

在第一个代码段中，您将计数设置为10，该值不会动态更改，因此它将更改一次，然后等待该计数再次更改，而这不会在那发生，而在第二个代码段中，异步操作将操作完成后，它将更新count，由于此计数，更新useEffect将连同其中的异步操作一起被触发。因此，它进行了递归更新。

如果需要，您可以像这样更改第一个代码段以查看递归更新

setCount(count + 1);

Answer 3

这是钩子的陷阱以及它们如何更新状态，如果您先前的状态值和当前状态值相同，则react功能组件不会重新渲染，因此建议您使用状态的对象类型然后在创建状态时始终创建新对象或使用散布运算符更新对象内部的任何属性。在您的情况下， setCount（10）将始终返回常数10，因此useEffect不会触发无限次数，因为从理论上将count从5更改为10，但是对于API请求，它将始终返回具有新引用的对象，因此将创建一个无限循环。您还可以在API结果中执行 setCount（10），并且它也不会触发useEffect，因为计数基本上不会从10更改，除非从 5更改为10 。

了解使用效果的异步行为

3 个答案: