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

原由

很早以前看到的一篇关于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 - 高阶应用实例