Mobx-React React不重新渲染

Question

下面是使用Mobx管理state.But的React组件的一些代码，不同的使用方式会导致完全不同的结果。

App.js

import React from "react";
import "./styles.css";
import { observer } from "mobx-react";
import store from "./store";

const Span = () => {
  return <span>{store.count}</span>;
};

const app = function () {
  return (
    <div className="App">
      {/* section 1 */}
      <Span />

      {/* section 2 */}
      {/* <span>{store.count}</span> */}

      <button onClick={() => store.setCount(store.count + 1)}>Click</button>
    </div>
  );
};

export default observer(app);

store.js

import { observable, action } from "mobx";

class Store {
  @observable count = 0;

  @action setCount(count) {
    this.count = count;
  }
}

export default new Store();

使用第1节时，单击按钮不会刷新视图，但使用第2节时会刷新视图。

codesandbox

1、我想知道使用这两种方法的区别？

2、如果我坚持使用第1节，我如何更改代码？

Answer 1

只需将observer包装在Span组件上即可。

const Span = observer(() => {
  return <span>{store.count}</span>;
});

Span不会观察你的商店，所以它不知道发生了什么变化。