React Native之mobx绑定

发表于 | 更新于:

作为一个iOS开发，想必大家都经历过把很多状态和逻辑放到Controller当中的时候，当Controller逐渐变大，数据处理逻辑、视图展示逻辑和状态控制逻辑混在一起会导致代码越来越难维护，RN当中的State也会存在这样的问题，我们引入mobx就是为了解决这样的问题。

MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。

mobx通过响应式的结构将数据和视图的处理逻辑进行分离，比较好的解决了状态维护的问题，再将数据处理分离出去就是一个标准的MVVM的结构，开发者在VM当中对数据和视图进行了绑定后就可以只关心视图的渲染和数据的处理了，这样也更容易理解。

mobx的使用

使用前，首先我们要安装下

npm install mobx --save
npm install mobx-react --save    //React 绑定库

然后是分别在数据绑定文件和视图文件当中中添加装饰器绑定，下面是部分示例代码

//数据绑定文件
import { computed, observable } from 'mobx';

class IndexStore {
    @observable listData = [];
}

//视图文件
import { observer } from 'mobx-react/native';
import IndexStore from 'indexStore';

@observer
class Index extends Component {
    constructor() {
        super();
        this.store = new IndexStore();
    }

    render() {
    return (
        <MainItem dataSource={this.store.listData}
        renderHeader={
            () => <Item data={this.store}></Item>
        } />
    )
}

mobx的绑定过程

mobx在建立绑定时先将视图的render()走一遍，收集视图和被观察数据的关联，并将这些关联储存起来。当数据源发生变化之后，mbox就根据这些对应的关联，刷新对应的视图。

需要注意的是以下两种情况，对应的视图和关联不会被收集到：

1.赋值给属性的函数当中的关联不会在当前视图中收集

比如上面实例当中的renderHeader属性赋值的函数() => <Item data={this.store}></Item>，因为Item作为返回值返回，并不属于该视图当中的渲染。不过store当中的数据可以在Item当中的渲染中绑定，但需要你在Item中添加@observer.

2.直接使用被观察变量的值，未出现对应的引用

比如在Item当中添加了@observer，但是直接将被被观测变量的值赋值给了Item也是无法建立关联的，比如下面这种写法

renderHeader={
    () => <Item data={this.store.listData}></Item>
}

这样被观测变量的值赋了过去，在Item的render当中并没有被观察变量引用，这样mobx认为是没有被观察数据使用的。正确的方法是像实例当中那样把被观测数据的父级引用传递过去，在Item当中使用父级引用来引用被观察变量来使用。

只要注意了以上两种情况，mobx的绑定基本就没有什么大问题了，接下来就是享受mobx给你带来的便利了。

补充

绑定建立完成后，需要注意被观察的变量引用发生变化时必须是一个新值，指向一个新的地址，直接修改变量当中的值并不会让被观察变量的值发生变化，界面并不会刷新。

class IndexStore {
    //this.listData的值没有变化，界面不会刷新
    this.listData[0] = "1";

    //this.listData是一个新值，界面刷新
    this.listData = ["1"];
}