强大的状态管理工具-Mobx

前言

Mobx是一款精准的状态管理工具库，如果你在 React 和 React Native 应用中使用过 Redux ，那毫不犹豫地说，MobX 的简单性将成为你状态管理的不二之选，本文主要讲的是关于Mobx在React-native下的使用和常见问题。

常见API

在使用Mobx之前，首先介绍几个常见的API

1. observable

Mobx如此简单的原因之一，就是使用了可观察数据(observable Data),简单来说，可观察数据就是可以观察到数据的读取，写入，并进行拦截
Mobx中提供了observable接口来定义可观察数据，可观察数据的类型可以使基本数据类型，object，array或者ES6中的Map类型，
注意：数组经过observable包装之后，就不是Array类型了，而是Mobx中的一个特殊类型，observable类型。
虽然数据类型不一样，但是使用方式和原来使用方式一致(原始数据类型除外)

const Array =  observable([1,2,3]);
const object =  observable({name: 'Jay'});
const Map =  observable(new Map([['name','ding']]));

console.log(Array[0])  // 1
console.log(object.name)  // Jay
console.log(Map.get('name'))  // ding

@observable

装饰器可以再ES7或者TypeScript类属性中使用，将其转换成可观察的。 @observable可以再字段和属性getter上使用，对于对象的哪部分需要成为可观察对象，@observable 提供了细粒度的控制。

import { observable, computed } from "mobx";

class Order {
    @observable price = 0;
    @observable amount = 1;

    @computed get total() {
        return this.price * this.amount;
    }
}

observer

observer接收一个React-native组件作为参数，并将其转换成响应式组件

@observer export default class App extends Component  {
    render() {
        return (
            <View></View>
        )
    }
}

响应式组件，即当且仅当组件依赖的可观察对象数据发生改变时，组件才会自动相应并且重新渲染，而在传统的react-native应用中，当状态属性变化后会先调用shouldComponentUpdate，该方法会深层对比前后状态和属性是否发生改变，再确定是否更新组件。

shouldComponentUpdate是很消耗性能的，Mobx通过可观察数据，精确地知道组件是否需要更新，减少了利用shouldComponentUpdate这个方法，这是Mobx性能好的原因之一
陷阱:Mobx可以做很多事，但是它还是无法将原始数据类型转换成可观察的，所以值是不可观察的，但是对象的属性可以被观察，这意味着 @observer 实际上是对间接引用(dereference)值的反应。

computed

计算值（computed values）是可以根据现有状态或其它计算值衍生出的值,计算的耗费是不可低估的，computed尽可能帮你减少其中的耗费，它们是高度优化的。
computed values是自动帮你从你的状态(state)值和其他计算辅助值来计算的。MobX做了很多的优化。当参与计算的值没有发生改变，Computed是不会重新运行。如果参与计算的值没有被使用，Computed values是暂停的。如果Computed values不再是观察者(observed)，那么在UI上也会把它除掉，MobX能自动做垃圾回收,用法如下:

class foo {
    @observable length: 2,
    @computed get squared() {
        return this.length * this.length;
    }
}

Autorun

Autorun是用在一些你想要产生一个不用观察者参与的被动调用函数里面。当autorun被使用的时候，一旦依赖项发生变化，autorun提供的函数就会被执行。与之相反的是，computed提供的函数只会在他有自己的观察员(observers)的时候才会评估是否重新执行，否则它的值被认为是无用的
综上所述：如果你需要一个自动运行但确不会产生任何新的值的结果的函数，就可以使用Autorun，其他情况可以使用computed，Autorun只是作用于如果达到某个效果或者功能，而不是计算某些值
就像 @ observer 装饰器/函数，autorun 只会观察在执行提供的函数时所使用的数据。

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
var disposer = autorun(() => console.log(sum.get()));
// 输出 '6'
numbers.push(4);
// 输出 '10'

disposer();
numbers.push(5);
// 不会再输出任何值。`sum` 不会再重新计算

action

• 任何应用程序都有操作(action)，action是任何改变状态的事物，使用Mobx
  ，可以通过标记他们在你的代码中显式的显示你的操作(action)，它会更好的组织你的代码，它们用于修改可观察量或具有副作用的任何函数中。
  需要注意的是：action是用在strict mode 中的

  用法:

• action(fn)
• action(name, fn)
• @action classMethod() {}
• @action(name) classMethod () {}
• @action boundClassMethod = (args) => { body }
• @action(name) boundClassMethod = (args) => { body }
• @action.bound classMethod() {}

  // 添加图片
  @action addImg = () => {
    ImagePicker.openPicker({
      multiple: true,
      waitAnimationEnd: false,
      includeExif: true,
      forceJpg: true,
      maxFiles: 9 - this.imgs.length,
      compressImageQuality: 0.5,
    }).then((images) => {
      console.log(images)
    }).catch((err) => {
      console.warn(err)
    })
  }

2.Action仅仅作用于当前运行的函数，而不是作用于当前函数调用的函数，这意味着在一些定时器或者网络请求，异步处理的情况下，它们的回调函数无法对状态改变，这些回调函数都应该包裹在action里面，但是，如果你使用了async / await的话，最好的方式应该是使用 runInAction 来让它变得更加简单

@action /*optional*/ updateDocument = async () => {
    const data = await fetchDataFromUrl();
    /* required in strict mode to be allowed to update state: */
    runInAction("update state after fetching data", () => {
        this.data.replace(data);
        this.isSaving = true;
    })
}

常见可观察类型

Observable 对象

observable.object方法将对象变为可观察的，它实际上是把对象的所有属性转换为可观察的，存放到一个代理对象上，以减少对原对象的污染，默认情况下，observable是递归应用的，所以如果对象的某个值是一个对象或数组，那么该值也将通过 observable 传递

import {observable, autorun, action} from "mobx"

var person = observable({
    name : 'jack',
    age:24,
    sex:'男'
})

Observable 数组

与对象类似,可以使用Observable.array(array)或者将数组传给 observable,可以将数组转换成可观察的，这也是递归的，所以数组中的所有(未来的)值都会是可观察的。

import {observable, autorun} from "mobx";
var todos = observable([
    { title: "Spoil tea", completed: true },
    { title: "Make coffee", completed: false }
]);
autorun(() => {
    console.log("Remaining:", todos
        .filter(todo => !todo.completed)
        .map(todo => todo.title)
        .join(", ")
    );
});
// 输出: 'Remaining: Make coffee'

todos[0].completed = false;
// 输出: 'Remaining: Spoil tea, Make coffee'

todos[2] = { title: 'Take a nap', completed: false };
// 输出: 'Remaining: Spoil tea, Make coffee, Take a nap'

todos.shift();
// 输出: 'Remaining: Make coffee, Take a nap'

除了可以使用所有的内置函数，observable数组还提供了好多方法供我们使用

• clear() -- 从数组中删除所有项
• replace(newItems) -- 用新元素替换数组中所有已存在的元素
• remove(value) -- 通过值从数组中移除一个单个的元素。

注意：

不同于sort和reverse函数的实现，observableArray.sort 和 observableArray.reverse 不会改变数组本身，而只是返回一个排序过/反转过的拷贝，在 MobX 5 及以上版本中会出现警告。推荐使用 array.slice().sort() 来替代。

Observable Map

与数组的处理方式类似，Mobx也实现了一个ObservableMap类，不过只支持字符串。数字或Bool值作为键，ObservableMap在可观察对象的基础上，还要使键的增删可观察。它可以看做两个可观察映射和一个可观察数组的组合：

import {observable, autorun} from "mobx"
const map = observable(new Map());

autorun(() => {
  console.log(map.get('key'));
});

map.set('key', 'value'); // 新增 key-value 键值对，输出 value
map.set('key', 'anotherValue'); // 修改为 key-anotherValue，输出 anotherValue
map.set('prop', 'value'); // 不输出
map.delete('prop'); // 不输出

优化React 组件

避免在父组件中访问子组件的属性

在文档中也有提到过这个问题，Mobx对于一个observer组件，是通过访问属性来访问以来的，所以哪怕父组件里没有用到这个属性，只是为了作为props传给子组件，Mobx还是会算它依赖了这个属性，于是会产生不必要的更新，最好的方式是把数据统一放到Store中，子组件通过 inject store 方式获取数据。

小组件

由于React的机制，Mobx只能在组件层发光发热，对于组件内部就是无能为力了，所以大组件很容易卡死，小组件才能真正发挥Mobx的优势。

在专用组件中渲染列表

React在渲染大型数据集合的时候处理的很不好，因为协调器必须评估每个集合变化的集合所产生的组件。因此，建议使用专门的组件来映射集合并渲染这个组件，且不再渲染其他组件:

官方提供的demo如下:

不妥的处理方式:

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>
        </div>)
    }
}

在示例中，当user.name发生变化时React 会不必要地协调所有的 TodoView 组件。尽管TodoView 组件不会重新渲染，但是协调的过程本身是非常昂贵的。

正确的处理方式:

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

@observer class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

在react-native使用Mobx常见的问题

observable 数组的类型是对象

observable 数组类型其实是个对象，所以它遵循propTypes.object ，如果使用propTypes.array 会报错。mobx-react 为 observable 数据结构提供了明确的 PropTypes。

在 React Native 中渲染 ListView

React Native 的的DataSource只能接收真正的数组，但是observable 数组是个对象，所以在传给ListView之前使用.slice方法，此外，ListView.DataSource 本身可以移到 store 之中并且使用 @computed 自动地更新，这步操作同样可以在组件层完成

class ListStore {
  @observable list = [
    'Hello World!',
    'Hello React Native!',
    'Hello MobX!'
  ];

  ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

  @computed get dataSource() {
    return this.ds.cloneWithRows(this.list.slice());
  }
}

const listStore = new ListStore();

@observer class List extends Component {
  render() {
    return (
      <ListView
        dataSource={listStore.dataSource}
        renderRow={row => <Text>{row}</Text>}
        enableEmptySections={true}
      />
    );
  }
}

原文http://techblog.sishuxuefu.com/atricle.html?5bb9f17a0b6160006f5988bb