MobX是当前流行的状态管理库之一，经常与React一起使用。在本文中，您将学习如何使用MobX管理React应用程序的状态。如果需要，可以在GitHub存储库中找到本文中开发的代码。"了解如何使用MobX管理@reactjs应用程序的状态，MobX是Redux的替代方案。"在推特上留言先决条件在深入阅读本文之前，您应该已经对React有所了解。如果您还需要了解React，可以在这里找到一篇不错的React文章。除了知道反应，你还需要节点.js在你的机器上安装了NPM。如果您没有，请按照这里的说明操作。React中的状态管理在理解状态管理的概念之前，您必须了解状态是什么。此上下文中的状态是应用程序的数据层。当谈到React和帮助它管理状态的库时，可以说state是一个包含应用程序正在处理的数据的对象。例如，如果你想在你的应用程序上显示一个项目列表，你的状态将包含你想要显示的项目。状态影响React组件的行为以及它们的渲染方式。对！就这么简单。因此，状态管理意味着监视和管理应用程序的数据（即状态）。几乎所有的应用程序都有这样或那样的状态，因此，管理状态已经成为当今构建任何现代应用程序最重要的部分之一。当你想到React应用程序中的状态管理时，返利微信，基本上有三种选择：雷多克斯；新的React上下文API；还有莫布克斯。雷多克斯Redux是React应用程序最流行的状态管理解决方案。雷多克斯严格遵守真理的单一来源原则。通过这个库，互联网大数据，状态被保存在一个位置（存储）中，并成为一个只读实体。Redux围绕三个概念：存储、reducer和actions。存储区保存状态，actions表示更改状态的意图，reducer指定应用程序的状态如何响应操作而变化。为了改变应用程序的状态，reducer监听发出的操作，并根据执行的操作返回一个新的状态。还原器不会改变当前状态。它们复制当前状态，根据发出的操作修改它，并返回一个新状态。这样，您的状态就不会以不规则的方式发生突变。还原词是三个概念中最重要的一个。要了解有关Redux的更多信息，请参阅本文。反应上下文APIReact Context API是React应用程序中状态管理的另一种选择。这不像前面提到的替代品库。相反，这是一个内置解决方案的框架。实际上，这个API并不是什么新东西，它早就存在于React中了。但是，您经常会听到人们把它称为新的React Context API，因为直到最近（更具体地说，在React v16.3上）这个API才达到了成熟阶段。实际上，Redux在幕后使用这个API。API提供了一种方法，可以在React组件树中向下传递数据，而不必显式地通过所有子组件传递数据。这个API围绕两个组件展开，提供者（由位于组件树的更高层次结构中的组件使用）提供数据，消费者（由层次结构下的组件使用）使用数据。要了解有关新的React Context API的更多信息，请参阅本文。在下一节中，您将了解您可以使用的第三种选择，MobX。MobX简介如前所述，MobX是另一个可用于React应用程序的状态管理库。这个替代方案使用了一个更为被动的过程，并且它在社区中逐渐流行起来。MobX不仅仅是一个单独用于React的库，它还适合与其他JavaScript库和支持web应用前端的框架一起使用。"MobX是Redux的一个反应式替代品，与@reactjs应用程序集成得非常好。"在推特上留言MobX由知名公司赞助，如Algolia、Coinbase等。撰写本文时，MobX在GitHub上达到16719颗星。这显然告诉您，它正成为React应用程序中状态管理的可靠选择。在下面的小节中，您将了解使用MobX开发时必须牢记的重要概念。然后，在下一节中，您将看到MobX在创建示例应用程序时正在运行。MobX上的可观测态可观测状态是MobX的主要概念之一。这个概念背后的想法是使一个对象能够向观察者发出新的变化。您可以使用@observable decorator来实现这一点。例如，假设您有一个名为counter的变量，您希望它随时间而变化。你可以这样观察它：@可观察计数器=0或者，你可以这样声明：装饰（类名{计数器：可见})第二个类的名称是counter。这个修饰符可以用在实例字段和属性getter中。MobX上的计算值计算值是MobX的另一个重要概念。这些值由@computed decorator表示。计算出的值与可观察的状态密切相关。使用计算值，可以自动导出值。假设你有这样一个片段：类名{测试时间100=0；@可观察检验=0；@计算得到computedTest（）{返回这个测试时间100*100个；}}在此代码段中，如果test的值发生更改，则调用computedTest方法并自动更新testTimes100。因此，通过计算值，MobX可以在需要时使用@computed自动计算其他值。对MobX的反应反应与计算值非常相似。这里的区别在于，与计算和返回值不同，一个反应只会触发一个副作用，更像是执行一个副操作。反应是可观察到的变化的结果。反应可能会影响UI，也可能是后台操作。MobX提供了三种主要的反应函数：when、autorun和reaction。接受两个反应参数，作为谓词和参数。这个反应运行并观察第一个函数（谓词），当这个函数满足时，它运行效果函数。这里您可以看到此函数如何工作的示例：什么时候(//谓词() => 这个被激活了,//影响() => 这个。退出());一旦isEnabled类属性为true，该效果将执行exit函数。返回isEnabled的函数必须是一个作出反应的函数。也就是说，isEnabled必须标记为@computed，以便自动计算该值，或者更好地，使用@observable修饰符进行标记。下一个反应函数是autorun函数。与when函数不同，此函数接受一个函数并一直运行，直到手动释放它为止。在这里您可以看到如何使用自动运行功能：@可观察年龄=10岁const dispose=自动运行（（）=>{控制台.log（"我的年龄是："，年龄。得到())})有了它，每当变量年龄发生变化时，传递给autorun的匿名函数就会将其注销。调用dispose后，将释放此函数。其次，反应函数，强制接受两个函数：数据函数和副作用函数。此函数类似于autorun函数，但它使您能够更好地控制要跟踪的观察对象。在这里，数据函数被跟踪并返回要在effect函数中使用的数据。而自动运行函数对其函数中使用的所有内容作出反应，而反应函数则对您指定的观察值作出反应。这里您可以看到一个简单的用例：const todos=可观察([{title:"阅读Auth0博客"，完成：错误，},{title:"写MobX文章"，完成：正确}]);const reactionsSample=反应(() => 托多斯地图（待办事项=>待办事项标题),标题=>控制台.log（"反应："，标题。加入(", ")));在这种情况下，reaction函数对列表的长度和标题的更改做出反应。React开发人员可以使用的另一个反应函数是观察者函数。这个不是由MobX主包提供的，而是由MobX react库提供的。要使用observer函数，只需在其前面添加@observer decorator，淘客引流，如下所示：@观察者类类名{// [...]}通过这个反应函数，大数据的商业价值，如果在组件的render方法中使用了一个标记为@observable decorator的对象，并且该属性发生了更改，则该组件将自动重新呈现。observer函数在内部使用autorun。对MobX的行动动作是任何能改变状态的东西。您可以使用@action decorator标记您的操作。因此，您应该对任何修改可观察到的或有副作用的函数使用@action。一个简单的例子是：@可观测变量=0；@操作setVariable（newVariable）{这个变量=新变量；}这个函数正在更新一个observable的值，淘客qq群，因此它被标记为@action。实践中的暴动与反应现在您已经了解了MobX中的主要概念，现在是时候看看它的实际应用了。在本节中，您将构建一个简单的用户评论仪表板。在review dashboard中，用户将使用输入字段输入一个评审，从下拉列表中选择一个评分，最后提交评审。仪表板将显示评论的总数、平均星级评级和所有评论的列表。您将使用MobX来管理某些操作，例如在仪表板上实时更新评论，计算提交的评论总数，最后获得平均星级评级。完成后，你的应用程序将类似于：搭建一个新的React应用程序为了快速构建一个新的React应用程序，您将使用createreact-appcli工具引导您的R