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

Question

在功能组件中，我们对类组件使用 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...