MboX-数据结构-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 上的更新。

二：observable Array 的特殊之处