资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/高效的Mobx模式（Part 1 - 构建可观察数据）

高效的Mobx模式（Part 1 - 构建可观察数据）

trigkit4 / 665人阅读

摘要：高效的模式提供了一种简单而强大的方法来管理客户端状态。允许属性本身可观察，但不允许其任何子节点。默认情况下，仅将引用更改视为更改。构建可观察数据掌握数据变更方法高阶应用实例

起因

很早之前看到的一篇关于mobx的文章，之前记得是有人翻译过的，但是怎么找都找不到，故花了点时间通过自己那半桶水的英文水平，加上Google翻译一下，对于初学者，以及mobx的开发者提供些许帮助。

这里针对已经了解mobx，且有过一些简单的开发的同学，其中对文章有一些删减，还有翻译的不对的地方欢迎大家指出。

高效的Mobx模式 - （Part 1）

MobX提供了一种简单而强大的方法来管理客户端状态。 它使用一种称为（TFRP-Transparent Functional Reactive Programming）的技术，其中如果任何相关值发生变化，它会自动计算派生值。 也就是通过设置跟踪值更改的依赖关系图来完成的。

MobX导致思维方式的转变（For the better），并改变您的心理模型围绕管理客户端状态。

Part 1 - 构建可观察者

当我们使用Mobx时，建立客户端状态模型是第一步， 这是最有可能被客户端上呈现你的域模型的直接体现。实际上客户端状态也就是我们通常说的Store，了解redux的对此都很熟悉，虽然你只有一个Store，但是它是由多个子Store组件的，每一个子Store用来处理应用程序的各种功能。

最简单的入门方法是注释Store的属性，这些属性将随着@observable而不断变化。 请注意，我使用的是装饰器语法，但使用简单的ES5函数包装器可以实现相同的功能。

import { observable } from "mobx"
class MyStore {
    @observable name
    @observable description
    @observable author

    @observable photos = [] 
}
修剪可观察属性

通过将对象标记为@observable，您将自动观察其所有嵌套属性。 现在这可能是你想要的东西，但很多时候它更能限制可观察性。 你可以使用一些MobX修饰符来做到这一点：

asReference

当某些属性永远不会改变值时，这是非常有用的。 请注意，如果您确实更改了引用本身，它将触发更改。

let address = new Address();
let contact = observable({
    person: new Person(),
    address: asReference(address)
});

address.city = "New York"; // 不会触发通知任何

// 将触发通知，因为这是属性引用更改
contact.address = new Address();

在上面的示例中，address属性将不可观察。 如果您更改地址详细信息，则不会收到通知。 但是，如果您更改地址引用本身，您将收到通知。

一个有趣的消息是一个可观察对象的属性，其值具有原型（类实例）将自动使用asReference()注释。 此外，这些属性不会被进一步递归。

asFlat

这比asReference略宽一些。 asFlat允许属性本身可观察，但不允许其任何子节点。 典型用法适用于您只想观察数组实例而不是其项目的数组。 请注意，对于数组，length属性仍然是可观察的，因为它在数组实例上。 但是，对子属性的任何更改都不会被观察到。

首先创建@observable所有内容，然后应用asReference和asFlat修饰符来修剪可观察属性。

当你深入实现应用程序的各种功能时，你会发现这种修剪的好处。且当你开始时可能并不明显，这完全很正常。当你识别出不需要深度可观察性的属性时，请确保重新检查你的Store， 它可以对您的应用程序的性能产生积极影响。

import {observable} from "mobx";

class AlbumStore {
    @observable name;
    
    // 这里不需要观察
    @observable createdDate = asReference(new Date()); 
    
    @observable description;
    @observable author;
    
    // 只观察照片数组，而不是多带带的照片
    @observable photos = asFlat([]); 
}

扩展可观察属性

和修剪可观察属性相反，你可以扩展对象上可观察性的范围/行为，而不是删除可观察性。 这里有三个可以控制它的修饰符：

asStructure

这会修改将新值分配给observable时完成相等性检查的方式。 默认情况下，仅将引用更改视为更改。 如果您希望基于内部结构进行比较，则可以使用此修饰符。 这主要是针对值类型（也称为结构），只有在它们的值匹配时才相等。如下图：

const { asStructure, observable } = require("mobx");

let address1 = {
    zip: 12345,
    city: "New York"
};

let address2 = {
    zip: 12345,
    city: "New York"
};

let contact = {
    address: observable(address1)
};

// 将被视为一种变化，因为它是一个新的引用
contact.address = address2;

// 使用 asStructure() 修饰
let contact2 = {
    address: observable(asStructure(address1)) 
};

// 不会被视为一种变化，因为它具有相同的价值
contact.address = address2;

asMap

默认情况下，将对象标记为可观察对象时，它只能跟踪最初在对象上定义的属性。 如果添加新属性，则不会跟踪这些属性。 使用asMap，您甚至可以使新添加的属性可观察。 在内部，MobX将创建一个类似ES6的Map，它具有与原生Map类似的API。

除了使用此修饰符，您还可以通过从常规可观察对象开始来实现类似的效果。 然后，您可以使用extendObservable()API添加更多可观察的属性。 当您想要延迟添加可观察属性时，此API非常有用。

computed

这是一个如此强大的概念，其重要性无法得到足够的重视。 计算属性不是域的真实属性，而是使用实际属性派生（也称为计算）。 一个典型的例子是person实例的fullName属性。 它派生自firstName和lastName属性。 通过创建简单的计算属性，您可以简化域逻辑。 例如，您可以只创建一个计算的hasLastName属性，而不是检查一个人是否在任何地方都有lastName

class Person {
    @observable firstName;
    @observable lastName;

    @computed get fullName() {
        return `${this.firstName}, ${this.lastName}`;
    }

    @computed get hasLastName() {
        return !!this.lastName;
    }
}

构建可观察树是使用MobX的一个重要方面，这使MobX开始跟踪您的store中有趣且值得改变的部分！

特此声明： 在新版本4.0以上，asFlat、asStructure、asReference以及asMap等其他API已经被弃用，具体事宜需参阅更新文档。

Part 1 - 构建可观察数据

Part 2 - 掌握数据变更方法

Part 3 - 高阶应用实例

云服务器 私有云 java的观察者模式 Part-1 观察者模式 设计模式 观察者模式

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

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

相关文章

  • 高效的Mobx模式（Part 2 - 掌握数据变更方法）

    摘要：有了这个，下一步就是开始对变化作出反应。请注意，此延迟通知仅适用于当前函数范围中的。最快的方法是提供功能。只有当返回的数据发生变化时，才会执行副作用。最棒的部分是它会在运行后自动处理副作用。构建可观察数据掌握数据变更方法高阶应用实例 在上一部分中，我们研究了如何设置MobX状态树并使其可观察。 有了这个，下一步就是开始对变化作出反应。 坦率地说，这就是有趣的开始！ MobX保证只要您的...

    xinhaip 评论0 收藏0

  • 高效的Mobx模式（Part 3 高阶应用实例）

    摘要：当树变异时，连接的部分将作出反应并更新以反映变化。接下来，我们必须对这些行动状态发生的变化作出反应。这可用于将工作流转换为其他状态。将其视为产生价值的可观察物。构建可观察数据掌握数据变更方法高阶应用实例 前两部分侧重于MobX的基本构建块。 有了这些块，我们现在可以通过MobX的角度开始解决一些真实场景。 这篇文章将是一系列应用我们迄今为止所见概念的例子。 当然，这不是一个详尽的清单，...

    eccozhou 评论0 收藏0

  • 【用故事解读 MobX 源码（五）】 Observable

    摘要：前言初衷以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解源码本系列文章用故事解读源码一用故事解读源码二用故事解读源码三用故事解读源码四装饰器和用故事解读源码五文章编排每篇文章分成两大段，第一大段以简单的侦探系列故事的形式讲解所涉及人物场 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式...

    leeon 评论0 收藏0

  • React 状态管理库: Mobx

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

    liujs 评论0 收藏0

  • 【用故事解读 MobX 源码（四）】装饰器 和 Enhancer

    摘要：所以这是一篇插队的文章，用于去理解中的装饰器和概念。因此，该的作用就是根据入参返回具体的描述符。其次局部来看，装饰器具体应用表达式是，其函数签名和是一模一样。等装饰器语法，是和直接使用是等效等价的。 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码； 本系列文章： 《【用故事解...

    maybe_009 评论0 收藏0

发表评论

登陆后可评论

0条评论

trigkit4

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<