React 中的状态管理

Question

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

Answer 1

我个人更倾向于Redux。但是如果你是一个初学者，想要学习 Redux，你可能会遇到一些困难，直到你理解它。一旦你得到它，你也会喜欢它。与其构建你自己的自定义钩子，不如使用 Redux，就好像任何事情 wrong/you 都被某些东西击中一样，你有社区支持，你也可以使用一些中间件库来分派异步调用，比如 redux-thunk，等。您也可以将 Redux 与表单一起使用。我想如果你结束构建你的自定义钩子，你可能会浪费时间来处理所有这些。

Answer 2

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

Answer 3

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

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

局部状态 vs 全局状态（一些组件需要局部状态，将它们的所有状态放在全局状态中会导致很多问题）
react context 和 prop drilling 问题以及如何有效地使用 React Context
反应挂钩，尤其是 useReducer 和 useContext
不可变状态

Answer 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 为您提供了您需要的一切以及您构建自己所需的一切。

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

我愿意接受关于这两个库的任何反馈，如果您对状态有任何疑问，请随时发帖。

React 中的状态管理

State Management in React

reactjs

react-redux

react-hooks

react-context

react-state-management