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

如果我有一个需要使用和操作多个状态项的功能组件，并且我有多个状态用于不直接相关的不同事物（例如游戏统计数据和 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 的更多信息。

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

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

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

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

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