在反应中使用太多的useState钩子。我该怎么重构这个？

Question

useState的钩子很棒。我主要使用useState挂钩来初始化某些状态，我还将函数传递给子组件以更改状态。然而，我意识到我开始在我的父页面组件中使用太多的useState挂钩。这看上去和感觉都不对，因为我开始在父页面组件中使用大约6-10 useState挂钩。

在不显示代码的情况下，是否有更好的方法来做到这一点？也许是更好的练习，或者更好的改造方法。

谢谢

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);