Reactjs MobX组件将发生反应而不点火

我在文档中读到mobx react提供了一个称为componentWillReact的新生命周期。但是，我的类似乎只对渲染函数中的mobx更改做出反应。当我的存储更改时，不会触发componentWillReact

我把“下一个”作为道具送下去。此应用程序不使用mobx inject

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>
        )
    }
}

从'mobx react'导入{observer}；
@观察者类QuickShopNew扩展组件{
组件将反应（）{
console.log（this.props.store.next）；
}
render（）{
//console.log（this.props.store.next）；
返回(
)
}
}

正如我所看到的，您的组件没有在render方法中取消引用observed属性。这就是为什么mobx不知道应该重新检索组件，并且应该在值更改时调用componentWillReact

您可以阅读观察者组件的工作原理

这是代码笔

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'));

const{Component，PropTypes}=React；
常数{observable}=mobx；
const{observer}=mobxReact；
//为国家储备
班级商店{
@可观察下一步=0；
increaseNext=（）=>this.next+=1；
}
let store=new store（）；
@观察者
类MyComponent扩展组件{
组件将反应（）{
console.log（this.props.store.next）；
}
render（）{
返回(
{this.props.store.next}
);
}
}
类应用程序扩展组件{
render（）{
返回(
增加
);
}
}
//插入容器
ReactDOM.render（，document.getElementById（'app'））；

我认为您应该避免使用“componentWillReact”，而只使用standart Mobx服务，如以下示例所示：

如果您打算用操作更新可观察变量，那么使用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')
)

从“React”导入React；
从“mobx”导入{可观察、操作、计算}；
从'mobx react'导入{observer}；
类应用商店{
@可观察下一步=0；
@action updateNext=（）=>this.next=this.next+1；
@计算得到UI_renderValueNext（）{
返回this.next？this.next:0；
}
}
const appStore=新appStore（）；
@观察者
类AppComponent扩展了React.Component{
render（）{
返回(
{this.props.UI_rendernext}
点击我
)
}
}
ReactDOM.render(
，document.getElementById（'root'））
)

您能在问题中包括您的

商店吗？这可能会提供一些线索，说明什么可能是错误的。为什么要避免使用componentWillReact？