Javascript 在react js useState（）钩子中更改多个状态

所以我想知道当我改变一个处理函数中的多个状态时会发生什么。它们将同时得到更新，还是一个接一个地执行

const [x, setX] = useState(0)
const [y, setY] = useState(0)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

如果一个国家依赖其他国家又会怎样

const handlerFunction = () => {
  setX(x+1)
  setY(x+1)
}

或者如果

const [x, setX] = useState(0)
const [y, setY] = useState(x)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

---

设置状态本质上是异步的，因此-

const handlerFunction = () => {
  setX(x+1)
  setY(x+1) // here the old value of x will be taken and the outcome value of x and y     will be different //                   
}

这里-

const [x, setX] = useState(0)
const [y, setY] = useState(x) // this is just to initialize an initial value to your state y so it will be once set to the value of x and then it doesn't depends on x//

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

---

JavaScript*中没有任何东西可以同时运行，因此状态更新会一个接一个地进行。但由于它们都是异步完成的，因此在下一次渲染之前，您不会看到

x

或

y

更新，因此从您的角度来看，它将同时显示

因此，在上述三种情况下，调用

handlerFunction（）

一次后，

x

和

y

的最终值将分别为1和1

还请注意，因为

x

和

y

只是变量，它们的值无论如何都不能同步更改，这就是为什么您只能在下一次渲染中看到它们的值更新

不过，请注意，当您的状态更改依赖于以前的状态时，最好使用以下方法：

const handlerFunction = () => {
  setX(x => x + 1)
  setY(y => y + 1)
}

这样可以确保每个更新都是一个完整的更新

*除非您正在处理工作线程

如果从基于React的事件中触发，则React批次状态更新

因此，如果从

onClick

，

onChange

，

onBlur

调用处理程序。。。React将同时应用多个更新。如果从

Promise

或

setTimeout

调用处理程序，则更新将分别调用

const [x, setX] = useState(0)
const [y, setY] = useState(0)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

如果一个状态变量依赖于另一个，我建议将它们分组为如下对象：

const [obj, setObj] = useState(() => ({x: 0, y: 0}));

const handlerFunction = () => {
  setObj(prevObj => {
    const newVal = prevObj.x + 1;
    return {x: newVal, y: newVal};
  });
};