如何使用useState钩子一次更新多个状态？

Question

在功能组件中，对于classComponents，我们使用useState而不是this.setState。但是据我所知，只能使用useState一次设置一个状态，而setState可以一次设置多个状态（例如this.setState（{a1：true，a2：false}））。

这是否意味着如果您想同时使用useState设置两个状态，您将获得一个双重的重新渲染，这效率很低？有办法解决这个问题吗？

Answer 1

AFAIK是正确的，但您也可以认为，在大多数情况下，您只是按照状态的关联方式对状态进行分组，而不是将一大堆this.state的属性相互关联而不相互关联，这也很糟糕某种方式

因此通常您不会每次都更新两个状态，如果这样做，很可能希望将这些状态混合为一个状态。

因此，假设您具有以下两种状态：

const [state1, setState1] = useState(...);
const [state2, setState2] = useState(...);

您总是可以在onChange函数（或任何其他函数）中进行以下操作：

const onChange = () => {
  setState1(...);
  setState2(...);
}

您应该将它们混合成一种状态：

const [state, setState] = useState({ state1: ..., state: ...}); // or it could be other thing than an object...