Question

所以我想知道当我在处理程序函数中更改多个状态时实际发生了什么。它们会同时同时更新还是会被一个接一个地执行。

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)
}

Answer 1

设置状态本质上是异步的，所以-

${__groovy(import java.time.*;import java.time.format.DateTimeFormatter;LocalDateTime.now(ZoneId.of( "UTC")).format(DateTimeFormatter.ofPattern("yyyy-MM-dd'T'hh:mm:ss")))}

在这里-

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 //                   
}

Answer 2

JavaScript *不会同时运行任何内容，因此状态更新会一次接一个地发生。但是，由于它们都是异步完成的，因此在下一次渲染之前您不会看到x或y的更新，因此从您的角度来看，它们将同时出现。

因此，在上述所有三种情况下，一次调用x后y和handlerFunction()的最终值将是1和1。

还要注意，因为x和y只是变量，所以它们的值不能同步变化，这就是为什么在接下来的时间里只能看到它们的值更新的原因渲染。

不过请注意，当状态更改依赖于先前的状态时，最好使用functional updates：

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

这确保每次更新都是atomic operation。

_{*除非您要处理辅助线程}

Answer 3

https://github.com/facebook/react/issues/14259

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

因此，如果您从onClick，onChange，onBlur调用处理程序，React将同时应用多个更新。如果您从Promise或setTimeout调用处理程序，则更新将分别称为。

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

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

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

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

3 个答案: