减轻国家管理的负担
状态管理和变更传播可以说是GUI 编程中最困难的挑战 。 许多范例都承诺要使我们免于负担。 只剩下少数。 其中包括MobX及其透明反应式编程的风格。
要了解MobX的吸引力，首先了解React是如何革新了 GUI编程的，将对您有所帮助。 传统方法允许描述GUI的初始状态。 进一步的GUI状态转换必须参考GUI元素和分段突变来完成。 由于容易遗漏边缘情况，因此容易出错。 使用React，您可以在任何给定的时间点描述GUI。 换句话说，处理GUI状态转换（例如，操作DOM）已经成为过去：您的GUI代码已变为声明式的。
React的关键优势是使更新GUI的“方法”变得透明。 MobX重新应用了该想法。 不是用于GUI操作代码，而是用于状态管理和更改传播。 实际上，将React和MobX组合在一起是协同的，因为即使React很好地照顾了如何更新 GUI，但是如果没有MobX， 何时更新 GUI仍然很麻烦。 组件之间的交叉通信是最大的痛点。
让我们探讨一下React和JavaScript中的一个示例，该示例说明MobX的优势：
该示例表示一个非常简化的电子商务页面。 这是一个演示及其实时可编辑的源代码 。 行为如下。 最初，您的购物车是空的。 当您单击“购买洗发水”时，购物车中的商品数将增加1，而最近购买的组件将显示“洗发水”。 单击“购买肥皂”对“肥皂”也是如此。 您也可以清除购物车。 在实际示例中，您将看到仅重新显示标题中的购物车，而不显示标题本身。 您还将看到，连续购买同一产品时，最近购买的组件不会重新呈现。
请注意，未显式指定可观察变量itemCount和lastItem与组件之间的依赖关系。 但是，组件可以根据更改正确有效地重新呈现。 您可能想知道这是如何完成的。 答案是MobX在执行组件的渲染函数的过程中隐式地建立了一个依赖关系图，该函数跟踪可观察变量发生变化时要重新渲染的组件。 考虑MobX的一种方法是使用电子表格，其中的组件是可观察变量的公式。 无论“魔术”在下面如何工作以及使用哪种类比，结果都是显而易见的：您摆脱了明确管理变更传播的负担！
综上所述，MobX是一种务实，非礼仪且有效的解决方案，可应对状态管理和变更传播的挑战。 它通过在可观察变量和组件之间建立运行时依赖图来工作。 同时使用React和MobX是协同的。 我什至可以说MobX不仅仅是一个库。 它代表着一种态度，可能会改变您整体上的编程方法。 通过以下链接深入了解MobX的世界：
附录
MobX的作者Michel Westrate使用短语“管理数据流”来描述MobX的功能。
“也许，这是更准确的讲MobX如数据流库，使您能够以最小的努力推出自己的状态管理架构” 来源
在本文中，“管理数据流”和“状态管理与变更传播”是等效的。
本文重点介绍MobX与React的用法。 重要的是要提到MobX绝不与React绑定-MobX是一个独立的库。 例如，它已成功用于Angular项目中。 甚至还有GUI编程范围之外的用法。
文章8 React组件通信的无通量策略很好地概述了在没有MobX的React中组件通信的不同方法。
现在，我没有忘记房间中的大象Redux及其风味。 这是另一篇文章的主题。 无论如何，对于好奇心已经有很多比较文章了。 我也没有提到MobX状态树。 主要是因为我还没有使用它。 这似乎是一个很棒的项目！
该文章也已在Zalando技术博客上发布 ！