javascript - 在 react 中使用过多的 useState 钩子(Hook)。我该如何重构这个？

Question

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

Answer 1

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