Mobx是什么？

它就是简单的、可扩展的状态管理。因为通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。

主要概念有哪些？

actions：一些改变状态值（state）的动作。
state：可观察的状态值
computed value：根据state，用pure function计算出来的值
reactions：因state或computed value变化而引起的反应，主要指视图UI重新渲染

常用装饰器

@observable 将一个变量变得可观察
@observer 常用于React组件，可监视其render函数里使用的可观察变量，从而作出相应reactions
@autorun 常用于组件类或store类的constructor里，用来创建实例时，可监视其函数参数里使用的可观察变量，从而作出相应reactions，一般是将函数再执行一遍。
@when 有条件的@autorun
@computed 通过可观察变量经过纯函数计算得来的值，使用时才会计算，没有使用时不会去计算
@action 能改变可观察变量值的操作（一般是函数方法）

如果不习惯用装饰器，用一些常用的函数方法也可以，本文只是写个人觉得的最佳实践，但后面项目实现时会实践。

TodoList 项目实现对比：https://github.com/peidongGuo/react-mobx-todolist.git

第一组：有没有使用Mobx

// 无 mobx
class TodoList extends Component {
 state = { //组件数据只能在state里，更改只能用setState()
    inputItem: "",
    listFlag: "all",
    allList: []
  };

  handleInputItem = e => {
    this.setState({
      inputItem: e.target.value
    });
  };

  handleItemStatus = (e, index) => {
    e.persist();
    let items = this.state.allList;
    console.log(items, index);
    items[index].isCompleted = e.target.checked;
    this.setState({
      allList: items
    });
  };
  ...
  render(){
    ...
    <input
                className="new-todo"
                placeholder="What needs to be done?"
                value={this.state.inputItem}
                onChange={this.handleInputItem}
                onKeyDown={this.handleAddItem}
                autoFocus={true}
              />
    ...
     <li
                        className={item.isCompleted ? "completed" : ""}
                        className={item.isEditing ? "editing" : ""}
                        key={index}
                        onDoubleClick={() => {
                          this.handleItemEdit(index, true);
                        }}
                      >
                        <div className="view">
                          <input
                            className="toggle"
                            type="checkbox"
                            checked={item.isCompleted}
                            onChange={e => {
                              this.handleItemStatus(e, index);
                            }}
                          />
                          <label>{item.title}</label>
                          <button
                            className="destroy"
                            onClick={() => {
                              this.handleItemDelete(index);
                            }}
                          />
                        </div>
                        <input
                          className="edit"
                          value={item.title}
                          onChange={e => {
                            this.handleItemTitle(e, index);
                          }}
                          onBlur={e => {
                            this.handleItemEdit(index, false);
                          }}
                        />
                      </li>
    ...
  }
  ...
  }

// 有 mobx 而且使用装饰器语法
@observer  // 将组件变得可观察
class TodoListMobx extends Component {
  @observable inputItem = "";  // 将属性变成可观察属性
  @observable listFlag = "all";
  @observable allList = [];

  @action // 此操作会引起可观察属性的变化
  handleInputItem = e => {
    console.log(e.target);
    this.inputItem = e.target.value; // 直接修改可观察属性
    console.log(this.inputItem);
  };

  @action
  handleItemToggle = (e, index) => {
    e.persist();
    this.allList[index].isCompleted = e.target.checked;
  };
  ...
  render(){  // 可观察的组件当其包含的可观察属性变化后，render会再次执行。
      ...
      <li
                        className={LiClass}
                        key={index}
                        onDoubleClick={() => {
                          item.isEdit = true;
                        }}
                      >
                        <div className="view">
                          <input
                            className="toggle"
                            type="checkbox"
                            checked={item.isCompleted}
                            onChange={e => {
                              item.isCompleted = !item.isCompleted;
                            }}
                          />
                          <label>{item.title}</label>
                          <button
                            className="destroy"
                            onClick={e => {
                              this.handleItemDelete(index);
                            }}
                          />
                        </div>
                        <input
                          className="edit"
                          value={item.title}
                          onChange={e => {
                            item.title = e.target.value;
                          }}
                          onBlur={e => {
                            item.isEdit = false;
                          }}
                        />
                      </li>
    ...
  }
  ...
 }

以上两组代码对比可以看到：mobx的加入将react组件里的数据变化操作简单化，机动化渲染UI。而且，整体代码书写上简单不少，而且理解上更容易。

第二组：有没有使用装饰器

使用装饰器的代码还是参考第一组的第二块代码

// 有 mobx 而且 不使用装饰器语法

class TodoListMobxNoDeco extends Component {
  inputItem = "";  
  listFlag = "all";
  allList = [];

 
  handleInputItem = e => {
    console.log(e.target);
    this.inputItem = e.target.value; 
    console.log(this.inputItem);
  };

  
  handleItemToggle = (e, index) => {
    e.persist();
    this.allList[index].isCompleted = e.target.checked;
  };
  ...
  render(){  // 可观察的组件当其包含的可观察属性变化后，render会再次执行。
      ...
      <li
                        className={LiClass}
                        key={index}
                        onDoubleClick={() => {
                          item.isEdit = true;
                        }}
                      >
                        <div className="view">
                          <input
                            className="toggle"
                            type="checkbox"
                            checked={item.isCompleted}
                            onChange={e => {
                              item.isCompleted = !item.isCompleted;
                            }}
                          />
                          <label>{item.title}</label>
                          <button
                            className="destroy"
                            onClick={e => {
                              this.handleItemDelete(index);
                            }}
                          />
                        </div>
                        <input
                          className="edit"
                          value={item.title}
                          onChange={e => {
                            item.title = e.target.value;
                          }}
                          onBlur={e => {
                            item.isEdit = false;
                          }}
                        />
                      </li>
    ...
  }
  ...
 }
 decorate(TodoListMobxNoDeco, {
  inputItem: observable,
  allList: observable,
  listFlag: observable,
  handleAddItem: action,
  handleClearCompleted: action,
  handleInputItem: action,
  handleItemDelete: action,
  handleItemToggle: action,
  handleListChg: action
});

TodoListMobxNoDeco = observer(TodoListMobxNoDeco);

export default TodoListMobxNoDeco;

能过这一组例子对比会发现，装饰器只是一个语法糖，可以完成不使用，但使用后，可让代码整洁不少。

一些常用调试追踪工具函数，会在下面的实践中使用

trace
mobx-react-devtools
spy

记住以下几点

mobx 只对observables 属性的引用监视，不会对其值进行监视

import DevTools from "mobx-react-devtools";
...
render(){return (
    <div>
        <DevTools />
    </div>
)}
...

//Counter组件，简单展示
@observer
class Counter extends Component {
  @observable count = 0; // 将count变成可观察属性

  countCopy = this.count;  // 被赋值给一个本地变量，不会随着this.count的变化而变化

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <span>这是 @observable 变量 count:{this.count}</span>
        <br />
        <span>这是 @observable 变量 count的本地拷贝:{this.countCopy}</span>
        <br />
        <span onClick={this.handleAdd}>Count加一</span>
        <br />
        <span onClick={this.handleDec}>Count减一</span>
      </div>
    );
  }

  @action
  handleAdd = () => {
    this.count++;
  };

  @action
  handleDec = () => {
    this.count--;
  };
}

可以看到拷贝出来的变量不会再变化

尽量晚些引用observables属性的子属性

// 这个例子中，父组件在使用子组件时直接赋值了整个observable,导到如果此Observable地址不变，子组件极有可能不会重新渲染

class SubCounter extends Component {
  render() {
   const count=this.props.count;
    return (
      <div>
        <span>
          这是子组件显示父组件 @observable 变量 countObj.count1:
          {count.count1}
        </span>
        <br />
        <span>
          这是子组件显示父组件 @observable 变量 countObj.count1:
          {count.count2}
        </span>
      </div>
    );
  }
}

@observer
class Counter extends Component {
  @observable count = 0;

  countCopy = this.count;

  @observable countObj = {
    count1: 1,
    count2: 2
  };

  constructor(props) {
    super(props);
  }
  render() {
    const countCopy2 = this.count;
    return (
      <div>
       // 这里直接引用了整个observable,导到如果此Observable地址不变，子组件极有可能不会重新渲染
        <SubCounter count={this.countObj} /> 
        <span>
          这是 @observable 变量 countObj.count2:{this.countObj.count2}
        </span>
        <br />
        <span>这是 @observable 变量 count的本地拷贝:{this.countCopy}</span>
        <br />
        <span onClick={this.handleAdd}>CountObj.count1加一</span>
        <br />
        <span onClick={this.handleDec}>Count减一</span>
      </div>
    );
  }

  @action
  handleAdd = () => {
    this.countObj.count1++;
  };

  @action
  handleDec = () => {
    this.count--;
  };
}
export default Counter;

嵌套组件最好每层都是observer

@observer //如果注掉，那么不会监视传过来的count, 自然不会重新渲染
class SubCounter extends Component {
  render() {
    return (
      <div>
        <span>
          这是子组件显示父组件 @observable 变量 countObj.count1:
          {this.props.count.count1}
        </span>
        <br />
        <span>
          这是子组件显示父组件 @observable 变量 countObj.count1:
          {this.props.count.count2}
        </span>
      </div>
    );
  }
}

@observer
class Counter extends Component {
  @observable count = 0;

  countCopy = this.count;

  @observable countObj = {
    count1: 1,
    count2: 2
  };

  constructor(props) {
    super(props);
  }
  render() {
    const countCopy2 = this.count;
    return (
      <div>
        <SubCounter count={this.countObj} />
        <span>
          这是 @observable 变量 countObj.count2:{this.countObj.count2}
        </span>
        <br />
        <span>这是 @observable 变量 count的本地拷贝:{this.countCopy}</span>
        <br />
        <span onClick={this.handleAdd}>CountObj.count1加一</span>
        <br />
        <span onClick={this.handleDec}>Count减一</span>
      </div>
    );
  }

  @action
  handleAdd = () => {
    this.countObj.count1++;
  };

  @action
  handleDec = () => {
    this.count--;
  };
}
export default Counter;