re--装饰器+ useObserver不重新渲染

Question

我不能用MobX重新渲染。我正在根据文件设置所有的东西。我的类包含action和observable装饰器。我试着用useObserver hook或observer HOC连接React组件，它简单地说不会重新呈现。

片段：

import React from "react";
import ReactDOM from "react-dom";
import { action, observable } from "mobx";
import { observer, useObserver } from "mobx-react-lite";

class Timer {
  @observable secondsPassed: number = 0;

  @action increaseTimer() {
    console.log("here");
    this.secondsPassed += 1;
  }
}

const myTimer = new Timer();

setInterval(() => {
  myTimer.increaseTimer();
}, 1000);

const TimerView = ({ timer }: { timer: Timer }) => {
  return useObserver(() => <div>{timer.secondsPassed}</div>);
};

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

https://codesandbox.io/s/minimal-observer-forked-gif4q?file=/src/index.tsx

我想和装饰师合作，我做错什么了？

Answer 1

经过4个小时的研究。我的团队的项目是使用MobX版本4.x，代码库使用装饰器作为上面的示例。

但

版本6之前的MobX鼓励使用ES.next装饰器将事物标记为可观察的、计算的和操作的。然而，装饰师目前还不是一个ES标准，标准化过程需要很长时间。该标准看起来也将不同于以前实现装饰师的方式。为了兼容性起见，我们选择了在MobX 6中不再使用它们，而是建议使用makeObservable / makeAutoObservable。

MobX文档

这意味着，MobX现在需要使用makeObservable(This)将类声明为在构造函数中可观察到的：

import { makeObservable } from "mobx";

class Timer {
  @observable secondsPassed: number = 0;

  @action increaseTimer() {
    this.secondsPassed += 1;
  }

  // THIS IS IMPORTANT FROM MOBX 6.X ONWARDS
  constructor() {
    makeObservable(this);
  }
}

从医生那里：

版本6之前的MobX不需要构造函数中的makeObservable(this)调用，但是由于它使装饰器的实现更简单和更兼容，所以现在需要了。这指示MobX使实例能够在装饰器中的信息之后被观察到--装饰器代替了makeObservable的第二个参数。

进一步阅读MobX

Answer 2

您需要将您的应用程序与供应商包装，并将商店作为支柱通过。

import { Provider } from 'mobx-react';


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