mobx

firim 发布于2023-04-26 00:41 / 2094人阅读

当今的前端开发中，状态管理是非常重要的一个方面。MobX是一个流行的状态管理库，它可以帮助我们更轻松地管理应用程序的状态。在这篇文章中，我们将介绍MobX的一些基本概念和使用方法。 MobX是一个响应式状态管理库，它的核心思想是将状态转换为可观察的对象。这意味着当状态发生变化时，所有依赖于该状态的组件都将自动更新。这种自动更新的机制可以帮助我们避免手动管理状态的复杂性。在MobX中，我们可以使用@observable装饰器来标记我们的状态对象。例如：

import { observable } from "mobx";

class Store {
  @observable count = 0;
}

在这个例子中，我们定义了一个名为“Store”的类，并使用@observable装饰器标记了一个名为“count”的属性。这意味着当“count”属性发生变化时，所有依赖于它的组件都将自动更新。除了@observable之外，MobX还提供了其他一些装饰器，用于定义计算属性、动作和反应。例如，我们可以使用@computed装饰器来定义一个基于现有状态计算出来的属性：

import { observable, computed } from "mobx";

class Store {
  @observable count = 0;

  @computed get doubledCount() {
    return this.count * 2;
  }
}

在这个例子中，我们定义了一个名为“doubledCount”的计算属性，它基于“count”属性计算出来。当“count”属性发生变化时，“doubledCount”属性也会自动更新。除了计算属性之外，我们还可以使用@action装饰器来定义一个动作。动作是一种可以修改状态的方法，它可以帮助我们更好地控制状态的变化。例如：

import { observable, action } from "mobx";

class Store {
  @observable count = 0;

  @action increment() {
    this.count++;
  }
}

在这个例子中，我们定义了一个名为“increment”的动作，它可以将“count”属性加1。当我们调用“increment”方法时，MobX会自动更新所有依赖于“count”属性的组件。最后，我们还可以使用反应来响应状态的变化。反应是一种可以在状态变化时自动执行的方法，它可以帮助我们更好地控制应用程序的行为。例如：

import { observable, autorun } from "mobx";

class Store {
  @observable count = 0;
}

const store = new Store();

autorun(() => {
  console.log(store.count);
});

store.count = 1; // 输出1
store.count = 2; // 输出2

在这个例子中，我们定义了一个名为“autorun”的反应，它会在“count”属性发生变化时自动执行。当我们将“count”属性设置为1和2时，反应会自动输出相应的值。总之，MobX是一个非常强大的状态管理库，它可以帮助我们更轻松地管理应用程序的状态。通过使用@observable、@computed、@action和反应等装饰器，我们可以更好地定义和控制状态的变化。如果您还没有尝试过MobX，那么我建议您花些时间学习它，它将会是您开发应用程序的强大工具。

GPU云服务器云服务器 Mobx

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/130862.html

mobx学习总结

摘要：原理分析的核心就是通过观察某一个变量，当该变量产生变化时，对应的内的回调函数就会发生变化。回调函数若依赖外部环境，则无法进行收集很好理解，的回调函数在预执行的时候无法到达那一行代码，所以收集不到。 Mobx解决的问题传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流，数据流完全可控并可追踪。要实现该目标，便需要进行相关的约束。Redux由此引出了dispa...

roundstones 2019-08-22 15:30 评论0 收藏0
【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0
mobx——rudex的简单替代品

摘要：是一个的简单可扩展的状态管理库。它的副作用是自动更新。该函数返回一个值，当返回值为的时候，才会继续触发第一个函数。当返回值为时，不再继续监听。包含一个，该值用来区分执行事件的类型。 mobx 能干什么使用 react 写小型应用，数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段，引入任何状态管理库，都算是奢侈的。但是随着页面逻辑的复杂度提升，在中大型应用中，数据、业务逻...

DevWiki 2019-08-21 11:25 评论0 收藏0
React 状态管理库: Mobx

摘要：关心性能的情况下，需要手动设置这时就需要引入状态管理库。现在常用的状态管理库有和，本文会重点介绍，然后会将和进行对比，最后展望下未来的状态管理方面趋势。如果在任何地方都修改可观察数据，将导致页面状态难以管理。 React 是一个专注于视图层的库。React 维护了状态到视图的映射关系，开发者只需关心状态即可，由 React 来操控视图。在小型应用中，单独使用 React 是没什么问题...

liujs 2019-08-20 17:49 评论0 收藏0
【用故事解读 MobX源码（一）】 autorun

摘要：随后，执行官给出一张当张三存款发生变化之时，此机构的运作时序图的确，小机构靠人力运作，大机构才靠制度运转。第一条语句创建观察员第一条语句张三我们调用的时候，就创建了对象，对象的所有属性都将被拷贝至一个克隆对象并将克隆对象转变成可观察的。 ================前言=================== 初衷：网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。...

qieangel2013 2019-08-22 15:19 评论0 收藏0
我为什么从Redux迁移到了Mobx

摘要：需要注意的是，在中，需要把数据声明为。同时还提供了运行时的类型安全检查。在利用了，使异步操作可以在一个函数内完成并且可以被追踪。例如在中，数组并不是一个，而是一个类的对象，这是为了能监听到数据下标的赋值。 Redux是一个数据管理层，被广泛用于管理复杂应用的数据。但是实际使用中，Redux的表现差强人意，可以说是不好用。而同时，社区也出现了一些数据管理的方案，Mobx就是其中之一。 R...

DevYK 2019-08-21 17:50 评论0 收藏0