Question

我在文档中读到mobx react提供了一个名为componentWillReact的新生命周期。但是，我的类似乎只对渲染函数中的mobx更改做出反应。我的商店发生变化时，我们永远不会触发componentWillReact。

我发送＆＃34; next＆＃34;作为道具。这个应用程序不使用mobx注入。

import { observer } from 'mobx-react';


@observer class QuickShopNew extends Component {
    componentWillReact() {
        console.log(this.props.store.next);
    }

    render(){
        //console.log(this.props.store.next);
        return(
            <div>
            </div>
        )
    }
}

Answer 1

我可以看到你的组件没有在render方法中取消引用被观察的属性。这就是为什么mobx不知道该组件应该被重新渲染并且应该在值变化时调用componentWillReact。

您可以阅读观察者组件如何工作here

以下是codepen上的simple working example

const { Component, PropTypes } = React;
const { observable } = mobx;
const { observer } = mobxReact;


// Store for state
class Store {
  @observable next = 0;
  increaseNext = () => this.next +=1;
}

let store = new Store();
@observer
class MyComponent extends Component {
  componentWillReact() {
        console.log(this.props.store.next);
  }
  render() {
    return (
      <div>
        <h1>{this.props.store.next}</h1>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
          <MyComponent
            store={store}
          />
        <button onClick={store.increaseNext}>
          Increase
        </button>
      </div>
    );
  }
}

// Insert into container
ReactDOM.render(<App />, document.getElementById('app'));

Answer 2

我认为你应该避免使用“componentWillReact”并使用像这个例子那样的标准Mobx服务：

如果您打算使用action更新observable变量，请使用computed方法将更新的值发送到UI。

import React from 'react';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

class AppStore {

  @observable next = 0;

  @action updateNext = () => this.next = this.next + 1;

  @computed get UI_renderValueNext() {

    return this.next ? this.next : 0;
  }
}


const appStore = new AppStore();

@observer
class AppComponent extends React.Component {

  render(){
    return (
      <div>
        <div>
          {this.props.UI_rennderNext}
        </div>
        <button onClick={this.props.updateNext}>Click ME</button>
      </div>

    )
  }
}

ReactDOM.render(
  <AppComponent />, document.getElementById('root')
)

MobX componentWillReact没有触发

2 个答案: