💪 React + MobX 速成课程（5 张图片！）

React 应用程序中的状态管理可能很难。

您是否很难理解 React 状态管理，并且厌倦了为 Redux 编写样板？

让我们看看MobX - 一切都变得如此简单和轻松😃

👇 这里有一份 5 分钟的 React + MobX 速成课程！🥳

1 - MobX 概念

MobX 是一个“反应式”状态管理库。

我们直接修改状态。由于我们使用 MobX 来观察和跟踪状态变化，UI 将自动更新，就像 Excel 中的单元格更新一样。当条件满足时，网络请求也会自动发送。

一切都是自动的！

我们通常使用装饰器语法将类中的字段标记为“MobX 可观察对象”——易于使用或阅读。这样，普通的 JS 代码就得到了“增强”（例如，JS 数字变成了可跟踪的可观察对象）。

将状态逻辑分组到“存储”中也使我们的代码更加模块化。

除之外@observable，我们还有：

@computed- 从其他可观察对象/计算对象派生的状态，可以像可观察对象一样使用。需要使用 getter 语法。派生过程是自动的。

@action- 批量状态变更。只有操作完成时，更新才会触发反应。

我们可以使用autorun()或when()来观察可观察对象并在更新时执行效果

autorun()接受一个回调函数，并在每次其中用到的 Observable 更新时运行它。（记得进行清理！）

when()当满足条件时，仅运行一次回调。

mobx-react绑定让我们可以将 MobX 与 React 结合使用，而无需编写autorun函数来重新渲染组件。

我们将@observer其用作类组件的装饰器，或将其用作高阶组件 (HoC) 的包装器。这将创建一个观察者组件，用于跟踪渲染过程中所需的可观察对象，并在观察到更新时自动重新渲染。

好了，以上就是开始有效使用 MobX 所需的一切。非常简单，不是吗？😃

如果您对 MobX 的底层工作原理感到好奇，请观看Max Gallo 的精彩演讲“重塑 MobX ”。

非常感谢Michel Weststrate创建了这个很棒的库，并帮助审阅了这门速成课程！🙌

（线程速成课程格式受到Chris Achard启发😁查看他出色的 React/Redux、Git 速成课程！）

趁你还在这里，如果你还有 13 分钟的时间，并且有兴趣学习新的热门框架 Svelte，我这里还有一个速成课程和配套视频👉Svelte速成课程🔥

喜欢这篇文章吗？

我将在 Twitter 上发布更多内容：@hexrcs
您也可以在我的主页上找到我：xiaoru.li