在 React 中使用多个状态更好还是使用一个状态对象更好？

Question

如果我有一个需要使用和操作多个状态项的功能组件，并且我有多个状态用于不直接相关的不同事物（例如游戏统计数据和 UI 元素状态），那么性能（或实践）是否会更好？像这样做：

const [state, setState] = React.useState({
    username: 'JoeSchmoe200',
    points: 200,
    isHoveringOverItem: {item1: false, item2: false, item3: false},
    selectedItem: {item1: true, item2: false, item3: false}
})

（状态中保存的所有内容都在一个对象中并使用一种方法设置），或者像这样：

const [username, setUsername] = React.useState('JoeSchmoe200')
const [points, setPoints] = React.useState(200)
const [isHoveringOverItem, setIsHoveringOverItem] = React.useState(
    {item1: false, item2: false, item3: false}
)
const [selectedItem, setSelectedItem] = React.useState(
    {item1: true, item2: false, item3: false}
)

其中每个状态都单独声明并单独设置。我只是想在这里引发一场对话，以了解有关 React 的更多信息。

对于这样的表现，您有何看法？可读性方面？这是偏好问题还是有客观的最佳实践？

Answer 1

在 React 18 之前，建议将预期更改的状态变量分组在一起。React 用于批处理状态更新，但仅限于直接在 React 事件（例如onClick、onChange等）和生命周期方法（例如useEffect. 例如，异步方法中的多个状态更新fetch()未批量更新。

然而，在 React 18 中，所有一起发生的状态更新都会自动批处理到单个渲染中。这意味着可以将状态拆分为任意多个单独的变量。

来源：https ://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching

尽管如此，在我看来，将相关部分放在一起以获得更好的代码可读性仍然是一个很好的做法。但状态对象应保持在可管理的大小，否则useReducer()应使用。

Answer 2

在 React 18 中，状态更新会自动批处理，因此您实际上不需要将所有内容混合到一个状态对象中。请阅读此处有关自动批处理的部分。知道了这一点，以下是我从这篇文章中得到的一些提示

• 尽可能保持你的状态平坦。嵌套对象难以管理，并且可能会引入重新渲染错误。
• 并非所有东西都需要成为状态对象。
• 使用简洁且具有描述性的名称。