@computed 方法在 react + mobx 中不起作用答案

【问题标题】：@computed method doesn't work in react + mobx@computed 方法在 react + mobx 中不起作用
【发布时间】：2019-02-28 09:04:10
【问题描述】：

我是 react 和 mobx 的新手。我正在尝试仅将 @computed 方法用于示例。我有复选框，更改后，状态（用户名）会更改，但@computed 方法不会调用。这是我的代码：

LoginStore.js：

import { computed, observable } from "mobx";

class LoginStore {

  @observable
  username = "Daimon";

  @computed
  get report() {
    return this.username + "12345";
  }

}

var store = new LoginStore;
export default store;

自动化：

import React, { Component } from 'react';
import { observer } from "mobx-react";

@observer
class Autorization extends Component {
  test = () => {
    this.props.store.username = "krikkk";
  }
  render() {
    return (
      <body>
        <p>{this.props.store.username}</p>
        <input type="checkbox" class="custom-control-input" id="customCheck1" onChange={this.test}/>
      </body>
    );
  }
}

export default Autorization;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Autorization from './Autorization';
import registerServiceWorker from './registerServiceWorker';
import loginStore from "./stores/LoginStore";

ReactDOM.render(<Autorization store={loginStore}/>, document.getElementById('root'));
registerServiceWorker();

package.json:

{
  "name": "autorization",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "custom-react-scripts": "^0.2.2",
    "mobx": "^5.1.2",
    "mobx-react": "^5.2.8",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5"
  }
}

有人知道怎么解决吗？

【问题讨论】：

标签： reactjs mobx mobx-react

【解决方案1】：

您的@computed 方法在更改用户名后不会被重新调用，因为报告方法本身没有在任何有效的地方使用。

来自mobx官方文档：

如果影响它们的任何值发生更改，计算值会自动从您的状态派生。在许多情况下，计算值可以被 MobX 优化掉，因为它们被认为是纯的。例如，如果先前计算中使用的数据都没有更改，则计算属性将不会重新运行。 如果某个计算属性没有被其他计算属性或反应使用，它也不会重新运行。在这种情况下，它将被暂停。

要进行测试，您可以在 Authorization 组件的渲染上进行更改

        <p>{this.props.store.username}</p>

到

        <p>{this.props.store.report}</p>

【讨论】：