MobX 6.0的新功能

2020年12月30日11:23:45 发表评论 139 次浏览

本文概述

要使一个库广为人知并经常在React中使用, 有很多要求。尤其是对于状态管理库, 基于该库的核心概念可以对开发人员是否采用该框架产生完全不同的影响。

MobX被社区采用并在许多不同项目中使用的原因之一是因为它的哲学。 MobX是一个非常简单, 简单, 健壮且不受限制的库, 只会随着时间的流逝而变得越来越好。几乎没有样板的状态管理库使开发人员的生活更轻松, 这是MobX与React中其他常规状态管理库相比的主要优势之一。

MobX是React中最常用的状态管理库之一现在有一个新版本, 进行了一些更改, 以使该库更加简单, 健壮和可扩展。 MobX不是React应用程序专用的库, 它也可以与其他JavaScript库和框架一起使用。

我们将探索MobX 6.0版本中的新功能, 并了解如何将代码从旧版本迁移到最新版本。

手机

如果你还没有尝试过MobX, 我将向你展示有关MobX实际工作原理的概念。在React应用程序中使用MobX有很多优点, 以便使其更具可伸缩性, 更健壮和更直接。来自文档。

可以从应用程序状态派生的任何内容都应该是。自动地。

基本上, MobX具有四个重要的概念, 你应该记住:

可观察的负责跟踪数据结构(类, 对象, 数组, 引用)。每当我们商店中的值发生变化时, MobX就会为我们跟踪新值:

import { observable } from "mobx";
class Store {
  @observable counter = 0;
}

动作负责修改我们的状态。每当我们想要更新值时, 我们都需要执行一个操作。总是响应事件, 单击按钮或提交表单来执行操作, 例如:

import { observable } from "mobx";
class Store {
  @observable counter = 0;
  @action increment() {
    this.counter++;
  }

  @action decrement() {
    this.counter--;
  }
}

动作负责更改和修改我们的可观察物。在MobX中, 默认情况下, 无法在操作外更新状态。此规则使你的代码库和状态更加可预测, 无错误且健壮。

已计算值用于获取可观察物的信息。它们是一个跟踪状态的函数, 只要状态发生变化, 它们的返回值也会随之变化:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

MobX 6.0的新功能1
import { observable } from "mobx";
class Store {
  @observable counter = 0;
  @action increment() {
    this.counter++;
  }

  @action decrement() {
    this.counter--;
  }

  @computed counterMoreThan10() {
    return this.counter > 10;
  }
}

反应与计算值非常相似, 但不同之处在于它会触发副作用, 并且在可观察值发生变化时发生, 发生反应的目的是自动执行副作用。

现在, 我们对MobX的核心概念有所了解, 让我们了解6.0版本中的真正变化以及它的API如何变得更加易于使用和强大。

MobX 6.0

几个月前, MobX 6的提案是由该库的创建者创建的米歇尔·韦斯特斯特。由于有许多关于新版本的建议, 因此就即将推出的新MobX版本中应包括哪些内容和应该删除哪些内容进行了大量讨论。

这些是新的MobX 6.0的更改以及新功能:

装饰工

许多项目因使用JavaScript装饰器而闻名, 例如Angular, NestJS, 当然还有MobX。装饰者目前在第二阶段提案而且似乎不会很快得到支持。

在新的6.0版本中, 争议最大的观点之一是是否应该删除装饰器, 以获得一些优势, 例如:

  • 与标准现代JavaScript更具兼容性
  • 在大多数设置中开箱即用(例如创建反应应用)
  • 减小包装尺寸

MobX不再需要装饰器, 尽管在以前的版本中该库仍然可以不带装饰器地使用, 但是许多开发人员起初并不喜欢MobX, 只是因为使用了装饰器。

例如, 这是以前版本中使用装饰器的MobX的示例:

import { observable } from "mobx";
class Store {
  @observable counter = 0;
  @action increment() {
    this.counter++;
  }

  @action decrement() {
    this.counter--;
  }

  @computed counterMoreThan10() {
    return this.counter > 10;
  }
}

这是6.0版本的MobX的示例:

import {
  observable, action, computed, makeObservable
} from "mobx";
class Store {
  counter = 0;
  constructor() {
    makeObservable(this, {
      counter: observable, increment: action, decrement: action, counterMoreThan10: computed
    });
  }
  increment() {
    this.counter++;
  }
  decrement() {
    this.counter--;
  }
  get counterMoreThan10() {
    return this.counter > 10;
  }
}

对于某些开发人员而言, 不带修饰符的语法更加简洁明了, 对于其他人来说, 开发人员的体验变得更糟.

事实是使可观察实用程序功能使集成更加容易, 不再需要仅使用装饰器就下载和使用许多不同的软件包。

的使可观察实用功能应包装在建设者方法和状态的每个属性, 为了使其可观察, 应使用注释指定:

constructor() {
  makeObservable(this, {
    counter: observable, increment: action, decrement: action, counterMoreThan10: computed
  });
}

装饰器仍可以在MobX中使用, 但是我们仍然需要在类中添加一个构造器, 使用使可观察实用函数, 我们可以省略第二个参数:

class Store {
  @observable counter = 0;
  constructor() {
    makeObservable(this);
  }
  @action increment() {
    this.counter++;
  }
  @action decrement() {
    this.counter--;
  }
  @computed get counterMoreThan10() {
    return this.counter > 10;
  }
}

makeAutoObservable

在6.0版本中引入了makeAutoObservable实用功能比使可观察实用功能。

默认情况下, 它使所有属性都可见, 尽管你仍然可以使用特定的注释进行覆盖:

class Store {
  counter = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increment() {
    this.counter++;
  }
  decrement() {
    this.counter--;
  }
  get counterMoreThan10() {
    return this.counter > 10;
  }
}

的makeAutoObservable确实是MobX新版本中最重要, 最棒的更改之一。这使开发人员更轻松, 无需提及他们可能在商店中拥有的每个可观察值, 操作和计算值。

代理人

MobX有几种非常不同的配置方式, 为了在某些JavaScript引擎中使用它, 需要做一些事情。

在MobX 5.0中, 需要对代理的支持, 并且此要求在某些JavaScript引擎中引起了支持问题, 尤其是对Internet Explorer和React Native(取决于引擎)。

在后台, MobX使用代理使数组和普通对象可观察。问题是, 这可能会导致某些不支持代理的JavaScript引擎出现问题。在MobX 6.0中, 仍然支持并需要代理, 但是现在有一种方法可以通过使用配置功能:

import { configure } from "mobx";
configure({     
  useProxies: "never"
})

总结

多年维护和更新库并不是一件容易的事, MobX社区值得赞扬。自开始以来, 图书馆一直在不断完善并遵循其理念, "可以从应用程序状态派生的任何内容都应派生。自动"。

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

MobX 6.0的新功能2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: