使用 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 })
在我看来，最好有一个状态，但这可能会以某种我没有考虑到的方式影响性能/可读性？
反应文档建议使用多个单独的状态位 https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables对于彼此独立变化的事物：
然而，相反我们建议根据值倾向于一起变化的情况将状态拆分为多个状态变量。
（他们的强调）
例如，这与记忆效果很好（useMemo, useCallback)，因此您可以指示对 X 的更改而不是对 Y 的更改会使已存储的项目无效。它还可以很好地编写您自己的钩子（有关示例，请参阅链接的文档）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
