React 中的状态管理

Posted 2023-04-14

【中文标题】React 中的状态管理

【英文标题】：State Management in React

【发布时间】：2019-11-28 10:00:00

【问题描述】：

哪种技术更适合 React 应用中的状态管理？ 实际上，我想创建一个大型应用程序来管理我的状态，哪种技术最适合状态管理上下文、Redux 或 react 自定义钩子？

【参考方案1】：

我个人更倾向于 Redux。但是如果你是一个尝试学习 Redux 的初学者，你可能会很难理解它。一旦你得到它，你也会喜欢它。与其构建您自己的自定义钩子，不如使用 Redux，就好像出现任何问题/您被某些事情所震惊，您有社区可以支持，您还可以使用一些中间件库（如 redux-thunk 等）调度异步调用。您可以也可以将 Redux 与表单一起使用。我想如果你最终构建你的自定义钩子，你最终可能会浪费时间来处理所有这些问题。

【讨论】：

好吧，自定义挂钩，但为什么我不使用上下文机制？

对于您的问题，官方 Context Doc 说。上下文主要用于在不同嵌套级别的许多组件需要访问某些数据时。谨慎应用它，因为它使组件重用变得更加困难。

希望你能得到它（谨慎应用它，因为它使组件重用变得更加困难。）这就是我要强调的一点。

我猜你对使用 Hooks 和 Context 很感兴趣。希望这可以帮助你。 medium.com/yld-engineering-blog/…

【参考方案2】：

当然，最好继续使用 Redux，因为使用 Redux 处理大型应用程序更容易。它只有一个商店，基本上是一个 javascript 对象。您可以将商店分成许多块，每块将用于应用程序的特定部分。所有这些部分都将使用 redux 提供的 combineReducers 函数连接在一起。

【参考方案3】：

React 是一个状态管理库，随着 React 钩子的发布和对 React 上下文的大量改进，这种状态管理方法得到了极大的简化。

我认为在 99% 的情况下，我们不需要 redux 并为项目增加一层复杂性。 对于大型应用程序，redux 可能是更好的选择。但是，如果您选择 React 进行状态管理，您需要有关一些概念的良好信息，这些概念是：

本地状态与全局状态（某些组件需要本地状态，将其所有状态置于全局状态会导致很多问题） react context 和prop drilling 问题以及如何有效使用 React Context 反应钩子，尤其是 useReducer 和 useContext 不可变状态

【参考方案4】：

您总是需要问自己一个问题：我需要额外的库吗？

由于 Reacts 原生状态管理的改进，Redux 的受欢迎程度正在下降。这是有原因的！

如果您想为一家不是全新的公司工作，那么您有机会必须使用 redux。我很幸运地说服我的团队使用我们自己的状态管理库构建，只在引擎盖下使用 React.useState。

如果你的应用程序状态逻辑很简单，意思是：状态多为本地，共享状态多为父子关系，不同的状态相互依赖程度不高，那么我建议只使用React的useState和useReducer（在如果您喜欢使用减速器）。

一旦您的应用程序状态变得复杂，您就需要一些额外的全局状态管理。

关于 React.useState，您需要了解的最重要的一点是，返回的 setState 函数是您与该组件状态的连接。让我们假设我们可以将该功能从组件中取出并在其他地方使用它。这样，您就有了从组件外部更新状态的功能。

export let exportedStateSetter;

const Component = () => 
  const [state, setState] = useState();

  useEffect(() => 
    exportedStateSetter = setState;
    return () => exportedStateSetter = undefined;
  );

  return <div>state</div>
;

在上面的示例中，您现在可以导入exportedStateSetter 并在其他地方使用它来更新此组件的状态。

！这不是最佳实践示例，这是一个简单的可视化。

当您非常批判性地思考这一点时，您会意识到现在您知道如何从组件外部设置组件状态，您知道如何全局设置状态。

我强烈建议使用这种方法来构建您自己的全局状态库或使用我根据我解释的内容创建的一些：

npm install --save react-global-state-hook  // simple
npm install --save rx-global                // complex

总结一下：如果工作不需要，不要使用 Redux。您始终可以使用 Redux 约定，将状态分离到存储中，使用 reducer 更新状态以及与状态交互的操作。为此，您可以使用本机 React 状态管理，如果正确使用时不仅可以使用 React.useState。 React 为您提供所需的一切以及构建自己所需的一切。

随着时间的推移，我自己的库得到了最好的开发者体验。它迫使您了解一般的状态管理以及您正在使用的框架。

我愿意就这两个库提供任何反馈，如果您对状态有任何疑问，请随时继续发帖。