MobX 数据结构 - Array

1: 创建一个observable的Array的2种方式：

1: observable([...], {deep: true|false})
2: observable.array([...], {deep: true|false})

上面2种方式的作用是一样的，一个参数都是传入一个数组，这里特别注意一下第二个参数。
第二个参数是一个对象，有很多属性可以设置，其中deep属性是一个布尔值,默认情况是true，当：
1： {deep: true} 表示数组的元素也是observable的
2： {deep: false} 表示数组的元素不是observable的。意思就是数组单个元素的值的改变，并不是触发view的更新，但是数组的变化（比如数组元素的增加或者减少）会触发view的更新。我们看下面一个例子：

import {extendObservable, observable} from 'mobx'
import {observer} from 'mobx-react'
import {Component} from 'react'
import React from 'react'
import ReactDom from 'react-dom'

 @observer class TodoView extends Component {
  render(){
    return (
      <div>
        <button onClick={addTodo}>Add a new todo</button>
        {
          this.props.store.map((item, index)=>
            <li>
              <input 
              type='checkbox'
              checked = {item.completed}
              onClick = {()=>{item.completed = !item.completed}}
            />
            {item.title} - completed: {item.completed.toString()}
            </li>
          )
        }
      </div>
    )
  }
}
let todos = observable([
  {title: 'reading book', completed: false},
  {title: 'drink coffee', completed: false}], {deep: true});
let addTodo = ()=>{
    todos.push({title: 'have lunch', completed: true});
  }
const rootElement = document.getElementById('root');
ReactDom.render(<TodoView store = {todos}/>, rootElement);

执行上面的代码之后，最初我们会得到：

当我们点击第二个选项之后，第二个选项的completed属性会由false变为true，在view上也会得到更新

但是，如果我们在创建todos的时候，给的是{deep: false}，那么即使是我们点击了第二个选项，在UI上completed的值不会更新。
但是，即使是在{deep: false}的情况下，如果我们点击了'Add a new todo'按钮，那么我们会得到：

我们依然会得到UI的更新，因为我们是给数组新增了一个元素，改变的是数组本身，而不是某一个数组元素。所以在这个情况下，即使{deep: false},我们依然可以得到UI上的更新。

二：Mobx4及以下版本 observableArray的特殊之处
值得注意的是，我们在Mobx里面创建的observable Array，并不是ECMAScript原生的Array，意思就是：

Array.isArray(observable([])); //false

Mobx4及以下版本的observableArray是一个array-like object,但是与我们通常理解的array-like object(如arguments对象)又不一样。Mobx4及以下版本的observableArray的特点是：
1：ECMAScript Array的方法observableArray也可以使用
2：.sort()和.reverse()方法并不会改变原来的Array，而是返回一个操作后的copy。
3：如果你需要一个原生的Array（比如在调用第三方库的时候，需要一个原生的Array），需要使用.peek()或者.slice()方法

Array.isArray(observable([]).peek());//true