Question

这里有一些使用Mobx来管理状态的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没有观察到您的商店，因此不知道发生了什么变化。

Mobx-React React不重新渲染

1 个答案: