我应该将键/值对合并到一个 useState 挂钩中吗？答案

【问题标题】：Should I consolidate key/value pairs into a single useState hook?我应该将键/值对合并到一个 useState 挂钩中吗？
【发布时间】：2020-10-16 14:35:44
【问题描述】：

在大多数情况下，哪一个是最佳实践？

例如：

const [currentDaypart, setCurrentDaypart] = useState({})
const [nextDaypart, setNextDaypart] = useState({})

或

const [daypart, setDaypart] = useState({
    current: {},
    next: {}
})

??????

【问题讨论】：

【解决方案1】：

第一个更好。通常，您应该注意 React 状态下的深层嵌套对象。为避免出现意外行为，应不可变地更新状态。

一旦你对状态进行了深度克隆，React 将重新计算并重新渲染依赖于变量的所有内容，即使它们没有改变！你先把状态变平。一旦你这样做了，你就会发现可以帮助处理大型状态的漂亮工具，例如 useReducer()。

【讨论】：

我会说这取决于用例。如果在大多数情况下这两个值同时发生变化，那么将它们组合起来会更有意义，因为这将减少状态更新的数量并可能减少重新渲染的数量。
@michael 谢谢！我觉得这有助于澄清我的问题。
@sidecus 这也很有意义，特别是如果它们大部分时间同时更改。就我而言，我需要两全其美；一次更改单个值和多个值。
@sidecus setState() 方法不会立即更新组件的状态，它只是将更新放入队列等待稍后处理。 React 可以将多个更新请求批处理在一起以提高渲染效率。
是的，Michael React 可能会对其进行批处理，并且可能会按照我们无法直接控制的顺序进行批处理 - 所以最坏的情况下您可能会得到两次重新渲染。