2017-10-18 2 views
1

mobx react가 componentWillReact라는 새로운 라이프 사이클을 제공한다는 문서를 읽었습니다. 그러나, 내 클래스는 렌더링 함수의 mobx 변경에만 반응하는 것 같습니다. 저장소가 변경되면 componentWillReact가 실행되지 않습니다.MobX componentWillReact not firing

나는 "다음"을 소품으로 보냈습니다. 이 응용 프로그램은 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> 
     ) 
    } 
} 
+0

당신이 당신의'store'을 포함 할 수 codepen 방법을 읽을 수 있습니까? 그것은 무엇이 잘못되었을 지에 대한 단서를 줄 수 있습니다. – Tholle

답변

1

구성 요소가 렌더링 메소드에서 관찰 된 속성을 참조 해제하지 않는 것을 볼 수 있습니다. 이것이 mobx가 컴포넌트가 재 렌더링되어야한다는 것을 모르는 이유이며, componentWillReact는 값 변경에 대해 호출되어야합니다.

당신은 관찰자의 구성 요소 일 여기 here

그리고이에 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'));