Mobx-React React 不重新渲染

Question

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

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 不重新渲染

Mobx-React React Not re-rendering

reactjs

mobx

mobx-react