这些年，React.JS的海量增长催生了不同的状态管理库等，截至本文撰写之时，React中可供我们使用的状态管理库是巨大的。因此，了解为特定项目选择哪个状态管理库以避免被来自React社区的噪音和新闻所混淆是促进应用程序开发的重要因素。一些开发人员通过使用ReactHooks迎接了挑战；其他人将它们与Redux或新发布的应用程序状态管理库Recoil相结合。在本文中，我们将讨论状态管理及其在典型React应用程序中使用Redux、Hooks和Recoil的最佳用例。我们还将尝试回答以下问题：在选择状态管理库之前要考虑哪些指标？注意：本教程将对有兴趣开发需要状态管理库的React应用程序的读者有所帮助。本文不是React中状态管理的介绍。它需要对React、hooks和一些Redux有基本的了解；因此，如果您刚开始使用React和React中的状态管理，请在开始本教程之前了解这些基础知识。简而言之，什么是状态？状态管理只是实现跨组件通信和数据共享的一种方式。它创建一个具体的数据结构来表示您可以读写的应用程序状态。从React16.8开始，每个React组件，无论是函数式还是类，都可以有一个状态。在其最简单的定义中，State是一个JavaScript对象，表示组件中可以作为用户结果进行操作的部分。您也可以说状态只是组件的内存。当用户在典型的React应用程序中执行操作时，组件的状态会发生变化。虽然这还不错，但如果应用程序开始扩展，它很快就会成为一个问题；因此，此类应用程序的复杂性使得跟踪所有依赖项变得非常困难。为了回答介绍问题，假设我们正在构建一个电子商务应用程序；在这样的应用程序中，几乎每个元素都可以是一个组件-购物车、按钮、查看购物车会话、结帐、登录栏等。在这个应用程序中，添加到购物车的单个用户操作可以通过以下方式影响许多其他组件：购物车组件本身的状态将购物车添加到用户的购物车历史记录结帐产品项目这只是提到我们可以将其他大量内容添加到电子商务应用程序中。如果负责的工程师在开发应用程序时不考虑可扩展性，从长远来看，他们很快就会遇到许多错误和问题。像这样不断地调试和改进应用程序最终会很痛苦。上面的场景向我们展示了状态在典型的React应用程序中的重要性。在这个应用程序中管理状态时，我们可以使用我们选择的任何库；无论如何，他们仍然会完成工作。通常，状态必须被提升到最近的父组件，然后一直到它到达需要该状态的两个组件的共同祖先，此时它被向下传递。这个过程可能是压倒性的，使状态难以维持。通常，您可能需要将数据传递给甚至不需要它的组件。随着应用程序变得越来越大，状态管理变得混乱。这就是为什么你需要像Redux、Recoil这样的状态管理工具来更轻松地维护这些状态。在接下来的部分中，我们将实际了解所有状态管理库（Redux、Hooks、Recoil）、它们的独特性以及使用它们之前需要考虑的事项。Redux我们列表中的第一个是Redux；它已经存在了一段时间，并且几乎是第一个基于React的状态管理库。创建状态管理库Redux是为了解决我们电子商务应用程序中的一个问题。它提供了一个名为store的JavaScript对象，一旦设置，它就会包含应用程序中的所有状态，并在必要时更新它们。这是Redux工作原理的简化可视化。你可能会问，为什么Redux经常和React一起使用？我的经验是因为Redux根据用户操作处理状态更新，尤其是在UI中；除此之外，Redux可以用作任何框架的独立状态管理。什么时候使用Redux？在撰写本文时，Redux是React最流行的状态管理库之一。在本节中，我们将仔细研究何时在我们的应用程序中使用Redux。首先，Redux允许您在一个地方管理应用程序的状态，并使应用程序中的更改更具可预测性和可追溯性。它使您更容易弄清楚您的应用程序中发生了什么。不幸的是，所有这些好处都有特定的限制和权衡。通常，开发人员觉得使用Redux会增加样板代码，并使小事情显得势不可挡；但是，这完全取决于应用程序的架构决策。了解何时真正需要使用Redux的最简单方法之一是本地管理的状态何时开始变得混乱。随着应用程序的增长，跨组件共享状态也会变得乏味。那时，您现在开始寻找使过程变得简单的方法。在下一节中，我们将看看为什么我们应该为Redux使用React。为什么要使用Redux？使用Redux和React消除了管理状态的麻烦，使您可以更轻松地跟踪导致任何更改的操作，从而简化您的应用程序并使其更易于维护。让我们看看Redux状态管理带来的一些权衡。(1)社区支持作为React和Redux的官方绑定库，React-Redux拥有庞大的用户社区。这使得寻求帮助、了解最佳实践、使用基于React-Redux构建的库以及在不同的应用程序中重用您的知识变得更加容易。它是Github上讨论最多的React状态管理库。(2)增强的性能ReactRedux确保性能优化，以便仅在需要时才重新渲染连接的组件；因此保持应用程序的状态全局不会导致任何问题。(3)Redux使状态可预测在Redux中，状态始终是可预测的。如果将相同的状态和操作移至reducer，它会产生相同的结果，因为reducer是纯函数。状态也是不可变的，永远不会改变。它使执行诸如无限撤消和重做之类的困难任务成为可能。时间旅行也是可能的——能够在之前的状态之间来回移动并实时查看结果。(4)本地存储上的状态持久化可以将应用程序的某些状态持久化到本地存储上并在刷新后恢复。它使得在本地存储上存储诸如购物车数据之类的东西非常酷。(5)服务端渲染我们也可以使用redux来进行服务端渲染。有了它，您可以通过将应用程序的状态及其对服务器请求的响应发送到服务器来处理应用程序的初始呈现。(6)Redux可维护Redux对代码的设计方式有着严格的规定，这使得熟悉Redux的人更容易理解任何Redux应用程序结构。它通常更容易维护。它还可以帮助您将业务逻辑与组件树分开。对于较大的应用程序，使您的应用程序更具可预测性和可维护性至关重要。(7)调试变得容易Redux使调试应用程序变得容易。通过记录操作和状态，可以轻松了解编码错误、网络错误和生产过程中可能发生的其他形式的错误。除了日志记录，它还有优秀的DevTools，允许你时间旅行动作，在页面刷新时保持动作等。对于大中型应用程序，调试比实际开发功能花费更多的时间。虽然Redux有它的好处，但它并不能保证你已经将Redux添加到每个应用程序中。没有Redux，您的应用程序也可以正常运行。RecoilRecoil似乎是状态管理社区的最新工具——这个社区拥有大量很棒的库，例如Context、Mobx和Redux等等。在进入Recoil的细节之前，我想指出这个新的状态管理库不是React的“官方”状态管理库。然而，记录显示它是由Facebook团队的一名工程师构建和发布的，他是React的创建者。不过，就像Redux不是React的官方状态管理库一样，Recoil也不是，但如果它被证明对整个React生态系统有价值，它可能会被React爱好者广泛采用。Recoil解决的主要问题虽然它有其学习曲线，但它仍然解决了与大多数其他状态管理库相同的问题：全局状态管理。使用Recoil一段时间后，以下是我发现Recoils非常方便的区别。(1)类似React的方法和简单的Recoil的简单性是首屈一指的，这也是它出现在这个列表中的原因。您可以像使用Redux或MobX一样使用Recoil构建任何应用程序。然而，Recoil感觉就像在使用React的全球版本的useState。它还支持并发模式，这是一个巨大的优势（在撰写本文时仍在进行中）。(2)简单的学习曲线Recoil不像Redux和Mobx那样强加严格的学习曲线。除了易于理解的Atom和Selectors之外，它们不需要太多学习。(3)Application-wideobservations与其他状态管理库类似，Recoil可以很好地处理应用程序范围的状态观察。使用Recoil的其他好处包括：无样板API分布式和增量状态定义Recoil的核心概念是原子和选择器；涵盖这部分超出了本文的范围。但是，您可以查看他们的文档以获得深入的概述。何时使用Recoil在发布后不到两年的时间里，Recoil发展如此之快，截至撰写本文时，它在Github上拥有大约12,000颗星。除此之外，它在React爱好者和整个React社区中逐渐获得动力和大规模采用。就个人而言，我在我的任何项目中使用Recoil的唯一原因是因为我不打算在我的代码库中有这么多Redux样板。我曾经在生产中使用过Recoil，没有发生任何可怕的事情；到目前为止，一切仍然正常。因此，何时使用Recoil可能完全取决于您的应用程序的架构决策，如果您像我一样喜欢简单，您可能会开始使用Recoil。使用ReactHooksHooks是React库自创建以来添加的最杰出的功能之一。钩子为功能组件带来“状态”。功能组件现在可以自己创建和管理本地状态，就像类组件一样。接触过React的人应该都熟悉ReactHooks，包括useState、useEffect和useReducer。本节讨论如何在不干扰任何外部状态管理库的情况下独立使用方便的ReactHooks。您可以在没有任何库的情况下将ReactHooks作为您的主要状态管理工具，但这取决于您对ReactHooks的经验和理解。它们本身就很强大，几乎可以做外部库可以做的任何事情。在某种程度上，其他状态管理工具有一些优势。尽管如此，他们的计划还是让入门充满挑战。就像Redux一样，需要一些样板代码才能使其在我们的应用程序中运行；因此，它引入了不必要的复杂性。另一方面，使用useContextAPI和ReactHooks，我们不需要安装外部库来使我们的应用程序工作。它使处理React应用程序中的全局状态管理变得更简单、更直接。注意：假设您已经熟悉useState，我们将研究两个有助于React状态管理过程的Hook。useReduceruseReducer来自React16.8。就像JavaScript中的reduce()方法一样，useReducerHook接收两个值作为参数——一个reducer函数和一个初始状态——并返回一个新的状态：const[state,dispatch]=useReducer((state,action)=>{const{type}=action;switch(action){case'actiondescription':constnewState=//dosomethingwiththeactionreturnnewState;default:thrownewError()}},[]);在上面的代码片段中，我们定义了我们的状态和相应的方法调度来处理它。当我们调用dispatch方法时，useReducer()Hook将根据我们的方法在其action参数中接收到的类型执行操作：...return(MyContextvalue:{value}
/>)}使用useReducer和useContext使用useContext和useReducer可以让组件放在另一个层次上搭配状态管理。突然之间，我们可以将useReducer创建的状态容器及其调度函数从任何顶级组件传递到任何组件。它也可以是使状态“全局化”的最顶层组件。也可以使用Reactprops向下传递东西，但是React的ContextAPI使你的状态和调度函数在任何地方都可用，而无需显式地将所有东西向下传递到组件树中。结论在本文中，我们尝试介绍了2021年最流行的React状态管理工具，它们如何在React状态管理中发挥重要作用，以及何时在您的项目中使用它们。我想知道您在典型的React应用程序中管理状态的经验。
