减少Reactor应用程序中的样板文件，并使用Redux替代方案减少中间商。Redux已成为大多数使用React、Vue或Angular作为前端框架的应用程序的流行状态管理解决方案。Redux流行的主要原因之一是其仅2KB的轻量级大小。Redux的工作方式很简单：将应用程序的整个状态存储在中央存储中。所有组件都可以访问这个存储，因此组件之间不需要传递参数和属性。Redux的主要构建块是它的动作、reducer和store。让我们来看看Redux是如何工作的，以便更好地理解它和它的替代品之间的区别。因此，简而言之，来自组件的API调用被发送到Reducers。它们是基于对象的旧状态返回新状态的函数。新状态存储在商店中，商店是Redux应用程序中访问先前状态的中心实体。除了维护应用程序状态和控制对它的访问之外，存储还允许更新状态并通过订阅处理侦听器的注册和注销。为什么我们需要Redux的替代品？Redux及其用法听起来很简单，但也有一些缺点：它涉及相当大的学习曲线。由于必须具备函数式编程知识，因此学习Redux会变得更加困难。它为简单的更改添加了样板。由于redux中的流程是预定义的，因此您必须坚持使用它们。在较小的应用程序中，样板文件的数量似乎更多。即使Redux中的微小变化也会触发DOM重组过程。开发人员不赞成这样做，因为它很耗时并且对性能有不利影响。Redux的替代方案1.MobXMobX通过应用反应式编程的概念来同步模型和UI。它只更新UI的必需部分，而不是完全重新加载它。MobX致力于面向对象的概念和应用程序的数据模型。MobX简化了类和存储的文档，包括应用程序中使用的属性和方法。它通过在开发期间快速交付UI对象来支持快速开发，并允许添加生命周期挂钩“componentWillReact()”以进行反应性更新。这简化了应用程序的路由和导航。>https://mobx.js.org/由于MobX是基于类的，对象的序列化并不像JavaScript中那么简单。建议编写自定义序列化和反序列化方法。MobX需要通过API调用序列化数据。建议使用MobX为撤消/重做和数据更改时间创建自定义函数。以下是MobX的主要特性：它可扩展、易于使用并且不允许数据规范化。它映射状态和派生之间的关系，同时保持引用完整性，减少错误数量。它通过构建一个虚拟分叉图来简化状态修改，该虚拟分叉图最大限度地减少了保持分叉与状态同步所需的重新计算次数。它是一个JavaScript库，因此，您可以保留JavaScript的现有实用程序。它可以在客户端和服务器端使用。下面是一个使用MobX记录时间的例子。它使用Observable概念来跟踪时间：基于其透明的反应式编程，MobX被广泛用作Redux的替代品。2.ApolloGraphQLApolloGraphQL促进了将现代应用程序连接到云的数据层。React使用需要从服务器获取数据的RESTAPI。在现代互联系统中，需要获取大量数据。然而，这是不可行的。GraphQL通过允许组件声明数据弥合了这一差距。强大的端到端键控提高了服务器和应用程序之间的性能。该平台在一个集中位置管理数据。您可以简单地连接平台或微服务，并在这些系统之间连接必要的数据。GraphQL进行数据获取和数据转换。它通过创建抽象层来帮助解耦服务。GraphQL独立于平台和语言。ApolloBoost入门套件可用于集成ApolloGraphQL。您可以使用此工具包来配置客户端。它包括身份验证、内存缓存、状态管理和错误处理。ApolloGraphQL还提供了定制ApolloBoost所需的文档。让我们考虑创建Apollo客户端的示例。对于Apollo客户端，您需要一个GraphQL端点。例如：https://48p1r2roz4.sse.codesandbox.io，这是Apollo提供的playground。接下来，将ApolloBoost连接到React客户端。连接查询组件后，服务器将在发送数据时自动缓存数据。为了自定义端点，ApolloBoost提供了构建Apollo客户端所需的几个包。3.ContextAPI和ReactHooks自从创建hooks以来，它们就与ContextAPI结合使用来管理状态。为什么要使用钩子和上下文？我个人更喜欢在中小型应用程序中使用它们，因为它们使我可以更轻松地将可重用组件发布到Bit（UI组件以及“智能”组件）。未发布的组件不难在其他项目中重用，所以请记住这一点。>示例：探索发布到Bit.dev的React组件我们创建一个UI以在单击按钮时显示令牌。在React应用程序中，创建一个名为“context”的新文件夹并定义TokenContext.js。我们将定义令牌状态并将其设置为“0”。组件将使用TokenContext.Provider来访问状态。现在，我们创建一个类来显示令牌。下一步是创建用于增加和减少令牌的按钮。让我们创建TokenButton.js文件。创建一个显示类来设置UI。我们现在将创建一个名为TokenView.js的容器，以允许访问userContext挂钩。现在，在视图文件夹中创建一个视图类，如下所示：现在，将视图文件导入App.js。它将输出以下结果。4.PullStatePullState的作用类似于Redux，但不支持类。它使用钩子进行全局状态管理。钩子可用于启动多个存储并使用“useState”从状态访问值。您可以使用“userState()”挂钩创建商店并使用商店的状态。使用钩子，我们确保组件使用所需的状态。下面是使用PullState更改样式属性的示例。首先，为您的主题创建一个商店。接下来，我们将读取状态并在单击按钮时切换它。5.RxJSRxJS是一个反应式扩展JS库（RxJS），它使用Observables进行异步调用。它基于事件并与Redux结合使用。RxJS为应用程序提供了更好的性能和模块化，展示了更好的可调试调用堆栈，并具有向后兼容性。RxJS中最常用的概念是Observable、Scheduler和Subject。这是RxJS自定义钩子的简单片段，其中：使用“useEffect”钩子订阅Observable设置更改状态清理函数.MobX和ApolloGraphQL是使用最广泛的，并且以其性能和分别连接到许多不同平台的能力而闻名。许多其他人更喜欢ReactiveExtensionJS(RxJS)库，因为它使用Hooks而不是Redux。所以最后归结为最适合您的项目的方法。【责任编辑：赵宁宁电话：（010）68476606】
