mobx5相比较mobx4的区别

转载【原文地址找不到了】
最近我用 create-react-app 搭建 react typescript 项目，安装了最新版本 mobx 和 mobx-react，再写一个 store 例子时发现组件依赖的 store 数值有变化但组件没有重新渲染，下面我们来看是什么原因导致的。

我们先照平时方式来编写 store

// mobx@6.0.1
import { action, observable } from 'mobx';

class TestStore {
  @observable count = 0;

  @action
  setValue = (key: keyof TestStore, value: any) => {
    console.log(key, value);
    this[key] = value as never;
  }
}

export default {
  testStore: new TestStore()
}

页面引入

import { inject, observer } from 'mobx-react';
import React from 'react';

enum Oprate {
  MINUS = 'MINUS',
  PLUS = 'PLUS'
}

function App(props: any) {

  const {testStore} = props;

  const oprate = (type: Oprate) => {
    switch (type) {
      case Oprate.MINUS:
        testStore.setValue('count', testStore.count - 1);
        break;
      case Oprate.PLUS:
        testStore.setValue('count', testStore.count + 1);
        break;
      default:
        break;
    }
  }

  return (
    <div>
      <button onClick={() => oprate(Oprate.MINUS)}>--</button>
      <span>{testStore?.count}</span>
      <button onClick={() => oprate(Oprate.PLUS)}>++</button>
    </div>
  );
}

export default inject('testStore')(observer(App));

我们可以看到 store 中 count 数值是有变化的，但是组件并没有重新渲染，而且控制台也没有报错。在思考之际，我想到与之前项目库版本做对比，将 mobx 换成mobx@4.6.0版本，发现可以解决这个问题，那么这两个版本有什么不一样吗？我们需看看 mobx GitHub 官网

发现 store 的写法已经改变，官网例子如下：

import React from "react";
import ReactDOM from "react-dom";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react";

// Model the application state.
class Timer {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increase() {
    this.secondsPassed += 1;
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new Timer();

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
  <button onClick={() => timer.reset()}>
    Seconds passed: {timer.secondsPassed}
  </button>
));

ReactDOM.render(<TimerView timer={myTimer} />, document.body);

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
  myTimer.increase();
}, 1000);

无需通过 observable 和 action 等修饰器，直接在构造函数中使用 makeAutoObservable 来实现 observable 和 action 修饰器功能，使代码更加简洁。

将上面例子改写一下就可以了

import { makeAutoObservable  } from 'mobx';

class TestStore {

  constructor() {
    makeAutoObservable(this);
  }

  count = 0;

  setValue = (key: keyof TestStore, value: any) => {
    this[key] = value;
  }

}

export default {
    testStore: new TestStore()
}