React中的状态管理

时间:2019-07-19 11:49:49

标签: reactjs react-redux react-hooks react-context react-state-management

哪种技术最适合React App中的状态管理? 其实我想创建一个大型应用程序来管理状态,哪种技术最适合状态管理上下文,Redux或反应自定义钩子?

4 个答案:

答案 0 :(得分:1)

我个人更倾向于Redux。但是,如果您是尝试学习Redux的初学者,那么可能很难理解。一旦获得它,您也会喜欢它。与其构建自己的自定义钩子,不如使用Redux更好,因为万一出了问题/遇到了什么,您需要社区的支持,还可以使用一些中间件库(例如redux-thunk等)来调度异步调用。将Redux与表单一起使用。我想如果您结束构建自定义钩子,可能会浪费时间,要照顾好所有这些。

答案 1 :(得分:1)

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

答案 2 :(得分:1)

React是一种状态管理库,并且随着React钩子的发布以及对React上下文的大量改进,这种状态管理方法已经得到了极大的简化。

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

  1. 局部状态与全局状态(某些组件需要局部状态,并将其所有状态都置于全局状态会导致很多问题)
  2. 反应上下文和prop drilling问题以及如何有效使用React上下文
  3. 反应挂钩,尤其是useReducer和useContext
  4. 不可变状态

答案 3 :(得分:0)

您总是需要问自己一个问题:我需要额外的图书馆吗?

由于对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.useState,还可以使用本机React状态管理。 React为您提供了所需的一切以及构建自己所需的一切。

随着我自己的库的发展,我获得了最好的开发人员经验。它迫使您大致了解状态管理和所使用的框架。

我随时欢迎您访问2个库,如果您对状态有任何疑问,请随时发布。