Reactネイティブ、MobX、ライフサイクル

Question

私はReact NativeでMobXを使用しています。 Mobx Storeの状態が変更されたときに関数を呼び出すライフサイクルやメソッドがありますか？

Answer 1

componentWillReceivePropsは、コンポーネントレベルで使用できます。さて、あなたはnotificationStore.messageなどを変異させたときに

class Notification extends PureComponent<Props> { 
    ... 
    public componentWillReceiveProps(nextProps: any): void { 
    Alert.alert('message', nextProps.message); 
    } 
} 

：

@inject('notificationStore') 
@observer 
class SomeContainer extends Component<Props> { 
    ... 

    public render(): JSX.Element { 
    <Notification 
     message={this.props.notificationStore.message} 
     ... 
    /> 
    } 
} 

と通知で：たとえば、オブザーバーコンテナは小道具を通して実際のコンポーネント（活字体で虚ユースケース）を通知します。 「Hello world」通知コンポーネントによって表示されます。

もっと直接的なアプローチが必要な場合は、コンポーネントをstoreに挿入して変更を観察してください。基本的にはあなたの活字体のインタフェースは次のようになります。あなたが見ることができるように

interface Props { 
    notificationStore?: any; 
    ... 
} 

、ストアは常に小道具として考えられ、これは変異がcomponentWillReceivePropsライフサイクルイベントをトリガすることを意味しています。

私はこれを十分に明確に説明しました。あなたはcomponentDidMountでautorunを入れて、componentWillUnmountでそれを配置することができます

Answer 2

：

例（JSBin）

const store = observable({ 
    data: "data" 
}); 

setTimeout(() => { 
    store.data += " updated!"; 
}, 2000); 

@observer 
class App extends Component { 
    componentDidMount() { 
    this.disposer = autorun(() => { 
     console.log(`Data changed: ${this.props.store.data}`); 
    }); 
    } 

    componentWillUnmount() { 
    this.disposer(); 
    } 

    render() { 
    return <h1>{this.props.store.data}</h1>; 
    } 
}; 

ReactDOM.render(
    <App store={store} />, 
    document.getElementById("app") 
);