在类内维护状态以及由上下文API管理的状态是否有意义？

Question

我正在开始重构反应状态管理以利用Context API的路径。

我已经设置了一个基本的状态管理器，并且正在将上下文传递到一个配置文件中，该文件会以单独的形式出现，以避免道具钻探。

State.js

import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();
export const StateProvider = ({reducer, initialState, children}) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

建筑

问题

如果我在组件和上下文API中进行状态管理，我会感到困惑，无法确定每个组件的状态从何而来，但是我想在每个组件中具有状态的一件事就是知道哪些状态属于该组件。

问题

在与上下文API一起的组件中维护状态管理是否有意义？还是应该最终将所有状态重构为由State.js管理

Answer 1

如果您问我，您应该尽可能在组件级别上管理状态。您需要谨慎使用上下文api，因为每当上下文中的单个值发生变化导致应用程序性能下降时，您都会重新呈现作为上下文使用者的每个组件。上下文api的文档涉及此内容。这对于管理诸如用户身份验证之类的东西或管理主题颜色以及不变不大的事物非常有用，但是对于快速改变值或复杂的存储而言则非常有用。因此，在表单组件中管理状态（例如，每次击键都要更改状态）都应该在组件级别进行管理。

所有这些都说明了上下文api非常适合管理频率不高的小型商店。但是，如果您有一个连接许多组件的复杂商店，那么您实际上不应该使用上下文api，而应该使用redux之类的东西。设置有点麻烦，但是您无法像使用上下文api那样不断地重新渲染每个消费者组件。