在反应中使用太多的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);

Answer 2

我相信优化使用状态的最佳方法是解耦不必要的关系。无论你是否使用 useState 在 react 组件中执行此操作，请与 useContext、useReducer 或任何其他方法共享它们。将所有内容放在单个对象树中不会优化性能。因此，将上述内容更改为单一用途Reducer只会将问题转移到其他地方。

最优化的解决方案将是仅耦合必要的依赖项。即使用多个状态处理程序 - 即多个上下文提供程序，或多个useReducers，zustand或使用新的useSignal做一些聪明的事情，它本质上将通过仅侦听最少的差异来做同样的事情。

如果需要，您仍可以通过中央 useEffect 在这些多个状态之间进行订阅。

一个带有useContext的粗略示例：

<ProviderStateX>
<ProviderStateY>
<ProviderStateZ>
<MyComNeedsX>
<MyCompNeedsXY>
<MyCompChildNeedsY>
</>
<MyCompNeedsXZ>
<MyCompChildNeedsZ>
</>
</> 
</> 
</> 
</> 

有更整洁的选项没有嵌套提供程序，但该示例用于"上下文"原谅双关语。

一个更好、更干净的解决方案可能是使用信号、多个 zustand 状态或本机 js 代理，并且只监听你的 react 组件关心的一件事，以防止不必要的重新渲染。