コールバックでハンドルセット状態を行うMobxの方法

Question

Mobxを使用するためにセット状態を使用する既存のアプリケーションを変換しようとしています。どのように私はmobxを使用して、設定された状態のコールバック機能を達成することができます。この機能を実現するにはcomponentDidUpdateを使用する必要がありますか？

Answer 1

コンポーネントがMobXで再レンダリングされたときにカスタムロジックを実行するには、componentDidUpdateを使用する必要があります。観測可能な値は同期的に更新されますが、コンポーネントは通常どおり非同期に再レンダリングされます。

例（JSBin）

@observer 
class App extends Component { 
    @observable value = '' 

    componentDidMount() { 
    setTimeout(() => this.value = 'focus', 1000); 
    } 

    componentDidUpdate() { 
    this.ref.focus(); 
    } 

    render() { 
    return (
     <input 
     ref={ref => this.ref = ref} 
     value={this.value} 
     onChange={e => this.value = e.target.value} 
     /> 
    ); 
    } 
};