mobx简介

2018-03-08 本文已影响0人 boyrt

官方文档-传送

MobX是响应式编程，实现状态的存储和管理。使用MobX将应用变成响应式可归纳为三部曲：

定义状态并使其可观察

创建视图以响应状态的变化

更改状态

在介绍这三个步骤之前，我们先了解下MobX的核心API。

一、MobX核心API

1. Observable

observable是将类属性等进行标记，实现对其的观察。三部曲中的第一曲，就是通过Observable实现的。

observable
创建observable的方式很多，推荐使用ES7的装饰器（@observable），如何开启装饰器，后面将会介绍。
observable的value值的类型参照上图，observable包装后返回对应类型的值，如Observable Object等。

2. Actions

动作，通过action改变state。三部曲中的第一曲通过action创建一个动作。action函数是对传入的function进行一次包装，使得function中的observable对象的变化能够被观察到，从而触发相应的衍生。

action

action(name,fn)：对fn函数进行包装/装饰，name将被用作调试名。
runInAction：工具函数，是创建异步action的一种方式。
action只会对当前包装/装饰的函数做出反应，而不会对当前运行函数所调用的函数（不包含在当前函数之内）作出反应！这意味着如果 action 中存在 setTimeout、promise 的 then 或 async 语句，并且在回调函数中某些状态改变了，那么这些回调函数也应该包装在 action 中。
runInAction(f)实际上是action(f)()的语法糖。
强制action：设置强制模式后，action必须添加，否则报错。

3. 衍生

对observable的响应。三部曲中的第二部的实现方式。

衍生

衍生主要分为Reactions和Computed values。其中reactions是自动响应状态变化的副作用，如UI变化、控制台输出、后台服务传送数据。而Computed values（计算值）是自动响应状态变化的值。

observer：包裹react组件的高阶组件，在render方法中，使用observable包装/装饰的属性。
autorun：当你想创建一个响应式函数，但是该函数永远没有观察者，此时使用autorun。这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码。
当使用 autorun 时，所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发。
经验法则：如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。其余情况都应该使用 computed。
when: 观察并运行给定的 predicate，直到返回true。一旦返回 true，给定的 effect 就会被执行，然后 autorunner(自动运行程序) 会被清理。该函数返回一个清理器以提前取消自动运行程序。
reaction: autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。它接收两个函数参数，第一个(数据函数)是用来追踪并返回数据作为第二个函数(效果函数)的输入。
在执行效果函数时访问的任何 observable 都不会被追踪。
computed：计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值，创建的一个衍生属性。
MobX响应：并非从observable获取了值，MobX就一定响应，如果是在追踪函数之外和异步回调中使用，MobX将不会做出响应。
“追踪函数” 是 computed 表达式、observer 组件的 render() 方法和when、reaction 和 autorun 的第一个入参函数。

4. Decorators

装饰器，可使用的装饰器列表

observable.deep
observable.ref
observable.shallow
computed
action
action.bound

可以使用 @decorator 语法来应用这些装饰器。

[官方文档说明]

observable.deep: 所有 observable 都使用的默认的装饰器。它可以把任何指定的、非原始数据类型的、非 observable 的值转换成 observable。
observable.ref: 禁用自动的 observable 转换，只是创建一个 observable 引用。
observable.shallow: 只能与集合组合使用。将任何分配的集合转换为浅 observable (而不是深 observable)的集合。换句话说, 集合中的值将不会自动变为 observable。
computed: 创建一个衍生属性, 参见 computed
action: 创建一个动作, 参见 action
action.bound: 创建有范围的动作, 参见 action

5. FLOW

创建异步action的一种方式，这里不介绍了。官网传送

二、开启装饰器（Decorators）

（1）添加装饰器依赖：babel-plugin-transform-decorators-legacy
（2）.babelrc文件添加配置

"plugins": ["transform-decorators-legacy"]

三、三部曲

通过一个小demo，讲述如何使用MobX将应该用变成响应式。

首先必须先添加mobx和mobx-react依赖，装饰器依赖根据用户选择添加。

1. 第一曲

定义状态并使其可观察

新建mobx文件夹，observable的相关.js文件存储在此，如下图所示：

image.png

如何定义状态，并使得其可观察呢？接着看代码：
counter_store.js（计数）：

import { observable } from 'mobx'

class CounterStore {
    @observable counter = 0;
    @observable remoteCounter = 0;

    constructor(){}

increment(){
        this.counter++;
    }

    decrement(){
        this.counter--;
    }

    incrementAsync(){
        setTimeout(()=>{
            this.counter++
        },500);
    }
}

const counterStore = new CounterStore;

export default counterStore;

CounterStroe类中，对counter、remoteCounter使用了observable装饰器，即将counter、remoteCounter定义为MobX的状态，并可观察。

虽然increment、decrement、incrementAsync函数前无@action，但是因为没有设置强制action，所以默认被action装饰，都是创建了一个动作。

2. 第二曲

创建视图以响应状态的变化

首先使用observer包裹React组件的高级组件：

@observer
export default class HomeScreen extends Component {
  ...
}

其次，在HomeScreen组件的render方法中，使用被observable转换的值。

import counterStore from '../../mobx/counter_store'

    render() {
        return (
            <View style={styles.container}>
                <Text>Counter Container Test</Text>
                <Text>Clicked:<Text>{`${counterStore.counter}times`}</Text></Text>
                <Text onPress={()=>counterStore.increment()}>| +1 |</Text>
                <Text onPress={()=>counterStore.incrementAsync()}>| +1 Async |</Text>
            </View>
        );
    }
}

3. 第三曲

更改状态

在CounterStore类中，通过action创建了三个动作，分别是increment、decrement、incrementAsync。通过调用action装饰过的函数，实现更改状态的目的。
请看代码，onPress事件中调用函数：

import counterStore from '../../mobx/counter_store'

    render() {
        return (
            <View style={styles.container}>
                <Text>Counter Container Test</Text>
                <Text>Clicked:<Text>{`${counterStore.counter}times`}</Text></Text>

                <Text onPress={()=>counterStore.increment()}>| +1 |</Text>
                <Text onPress={()=>counterStore.incrementAsync()}>| +1 Async |</Text>
            </View>
        );
    }
}

当点击‘+1’时，上面的次数显示会响应的变化。这就是所谓的副作用一种形式。

拓展

如何进行状态的引用呢？

两种方式：

全局注册并注入store实例

直接import引用

全局注册并注入store
我参考的demo：https://juejin.im/post/5a3f06cd6fb9a044fe4693bc
demo中使用了Provider进行全局注册并注入Rootstore实例

const Navigation = () => {
    return (
        <Provider rootStore={store}>
            <Navigator/>
        </Provider>
    )
}

在需要使用的组件中，使用@inject('rootStore') ，我们就可以愉快地使用 this.props.rootStore 来拿到我们想要的数据啦

@inject('rootStore')
@observer
export default class HomeScreen extends Component {
  ...
}

注：@observer也需要添加，不然不会随着rootStore属性变化而重新渲染。

直接import引用
不进行全局注册，而是在需要使用mobx的Rootstore实例的组件中进行引用即可。

import counterStore from '../../mobx/counter_store'

Github项目demo

mobx简介

一、MobX核心API

1. Observable

2. Actions

3. 衍生

4. Decorators

5. FLOW

二、开启装饰器（Decorators）

三、三部曲

1. 第一曲

2. 第二曲

3. 第三曲

拓展

猜你喜欢

热点阅读

mobx简介

一、MobX核心API

1. Observable

2. Actions

3. 衍生

4. Decorators

5. FLOW

二、 开启装饰器（Decorators）

三、三部曲

1. 第一曲

2. 第二曲

3. 第三曲

拓展

猜你喜欢

热点阅读

二、开启装饰器（Decorators）