时间戳

首页 > 解决方案 > 在反应中使用过多的 useState 钩子。我该如何重构这个？

javascript - 在反应中使用过多的 useState 钩子。我该如何重构这个？

问题描述

useState 钩子很棒。我主要使用 useState 钩子来初始化某些状态，我也将函数传递给子组件来改变状态。但是，我意识到我开始在我的父页面组件中使用太多的 useState 挂钩。这看起来和感觉都是错误的，因为我开始在父页面组件中有大约 6-10 个 useState 挂钩。
在不显示代码的情况下，有没有更好的方法来做到这一点？也许是更好的实践，或者更好的重构方式。
谢谢

标签： javascriptreactjsreact-hooksreact-componentuse-state

解决方案

每当您遇到这样的问题时，您应该首先查看是否可以将组件拆分为多个较小的组件。但是，在某些情况下，这不是一种选择。在这些情况下，我建议使用 useReducer。

// before

const {cache, setCache } = useState({});
const {posts, setPosts } = useState({});
const {loading, setLoading } = useState(false);

// Would become after refactor

const initialState = {
  cache: {},
  posts:{},
  loading: false
}

const [state, dispatch] = useReducer(reducer, initialState);

推荐阅读