mobx6.0更新后没有重新渲染

最近在做一个svg编辑器的项目，使用react，引入了mobx，不过遇到了一个问题，就是数据更新以后没有重新渲染。

翻了一下官方文档，发现mobx6.0的时候已经变成了

import { makeAutoObservable } from "mobx"

function createDoubler(value) {
    return makeAutoObservable({
        value,
        get double() {
            return this.value * 2
        },
        increment() {
            this.value++
        }
    })
}

所以我需要写成

constructor() {
    makeAutoObservable(this);
    ...
}

这确实能解决问题，不过为什么呢？

为什么不用装饰器了？

根据知乎的文章找到了官方issue。主要的原因是跟随js的class语言标准不兼容才迫不得已修改的。下面是搬运

最新的标准规定了class的属性应该是[[define]] 上去的而不是 [[set]]上去的

class State {
  @observable value = 0;
}

旧版本的编译之后，产生的是set

class State {
    constructor() {
    //set属性
        this.value = 0;
    }
}

新版本的编辑之后，是Object.defineProperty

class State {
    constructor() {
       // define 属性
        Object.defineProperty(this, "value", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: 0
        });
    }
}

似乎会导致mobx的初始化拦截设置出现bug