React MobX - 装饰器 + useObserver 不会重新渲染答案

【问题标题】：React MobX - decorators + useObserver don't re-renderReact MobX - 装饰器 + useObserver 不会重新渲染
【发布时间】：2021-02-25 13:57:48
【问题描述】：

我无法使用 MobX 重新渲染 React。我正在按照文档设置所有内容。我的课程包含 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

我试图让它与装饰器一起工作，我做错了什么？

【问题讨论】：

这能回答你的问题吗？ mobx-react observer don't fires when I set observable
谢谢你的澄清，我遇到了同样的问题

标签： reactjs mobx

【解决方案1】：

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

但是

版本 6 之前的 MobX 鼓励使用 ES.next 装饰器来标记可观察、可计算和可操作的事物。但是，装饰器是目前还不是 ES 标准，标准化的过程是需要很长时间。看起来标准也会有所不同从之前实现装饰器的方式来看。为了利益我们选择在 MobX 6 中远离它们的兼容性，以及建议改用 makeObservable / makeAutoObservable。

MobX Documentation

也就是说，MobX 现在需要在构造函数中使用 makeObservable(this) 将类声明为 observable：

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

【讨论】：

【解决方案2】：

您需要使用 Provider 包装您的应用程序并将商店作为道具传递

import { Provider } from 'mobx-react';


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

【讨论】：