React Hooks useState - 推荐什么，每个组件只有一个状态或多个状态？

Question

使用 Hooks/Functional 组件在 React 中优化和使代码更具可读性的更好方法是什么？每个组件有一个 setState 钩子还是多个？

为了扩展我的问题，请考虑以下内容：

使用钩子，我们可以使用多个状态，以某种方式更方便地拆分特定用途的状态（例如，一种状态用于用户数据，另一种用于保存加载标志，另一种用于为 API 检索的数据等） . 在我的第一步中，我确信最好的方法是每个我想要管理的数据都有多个状态……但是，一段时间后，当我想要时，我开始遇到多个状态之间的同步问题更新/读取效果函数中的多个状态（useEffect）。

所以，我开始相信使用 Hooks 管理状态的最佳方法它只有一个使用对象的状态并从这里管理我的所有数据......就像类组件......

const [data, setData] = useState({
    retrieveData: false,
    apiData: [],
    userInfo: [],
    showModal: false
})

// To update:
setData(oldData => {
    return { ...oldData, showModal: true }
})

// Or:
setData({ ...data, retrieveData: true })

在我看来，最好有一个状态，但这可能会以某种我没有考虑的方式影响性能/可读性？

Answer 1

React 文档建议对相互独立变化的事物使用多个单独的状态位：

但是，我们建议根据哪些值倾向于一起更改将状态拆分为多个状态变量。

（他们的重点）

这与记忆化效果很好，例如 ( useMemo, useCallback)，因此您可以指示更改 X 而不是 Y 会使记忆项无效。它还可以很好地编写您自己的钩子（请参阅链接的文档以获取示例）。