javascript - React useState - 每个组件使用一个状态还是多个状态？

Question

使用 Hooks/Functional 组件来优化 React 并使代码更具可读性的更好方法是什么？每个组件有一个或多个 setState 钩子(Hook)？

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

通过钩子(Hook)，我们可以使用多个状态，以某种方式更方便地分割特定用途的状态(例如，一个状态用于用户数据，另一个状态用于保存加载标志，其他状态用于为 API 检索的数据) ， ETC)。在我的第一步中，我确信最好的方法是为我想要管理的每个数据设置多个状态......但是，一段时间后，当我想要时，我开始遇到多个状态之间的同步问题更新/读取效果函数 (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 文档 suggests using multiple separate bits of state对于彼此独立变化的事物:

However, instead we recommend to split state into multiple state variables based on which values tend to change together.

(他们的重点)

这与例如内存(useMemo、useCallback)配合得很好，因此您可以指示对 X 而不是 Y 的更改会使内存的项目无效。它还可以很好地编写您自己的钩子(Hook)(有关示例，请参阅链接的文档)。