Reactコンポーネントのどこに小道具依存状態を設定するのですか？

Question

propsで渡される親からの変数に応じて、コンポーネントの初期状態を設定したいとしましょう。

class MyClass extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

私はこのような状態を設定したい：

if (this.props.foo === 'bar') { 
    this.setState({foo: 'bar'}); 
} else { 
    this.setState({foo: 'notBar'}); 
} 

私はComponentDidMount()でそれを入れて、動作しているようです。しかし、私はそれをコンストラクタに移動し、構文this.state = {...}を使うべきですか？またはそれはComponentWillMount()に属していますか？もしそうなら、状態が時間内にレンダリングされるという保証はありますか？あなたの状態が適切な値に基づいて割り当てられているので

Answer 1

（fooは、テキストフィールドとして表示されている）、それを処理するのに適した場所は

1. ComponentWillMount /コンストラクタ2つの場所でそれを割り当てることです/ ComponentDidMount：コンポーネントがマウントされたときに一度だけ実行されます。もう1つのことは、componentWillMountまたはcomponentDidMountにsetStateを設定すると、定義されていない状態エラーが発生しないように、少なくともコンストラクタで初期化する必要があるということです。

2. ComponentWillReceiveProps：このライフサイクル機能は、実装が、毎回親再レンダリングその後の時点で呼び出されませんので、いつでも親から小道具fooの変更は、それがここで再び状態に

を割り当てることができます

はい、コンストラクタで状態を初期化するために有効である

constructor(props) { 
    super(props); 
    this.state = { 
     foo: '' 
    } 
} 
componentWillMount(){ 
    if (this.props.foo === 'bar') { 
      this.setState({foo: 'bar'}); 
    } else { 
     this.setState({foo: 'notBar'}); 
    } 
} 
componentWillReceiveProps(nextProps){ 
    if (nextProps.foo === 'bar') { 
      this.setState({foo: 'bar'}); 
    } else { 
     this.setState({foo: 'notBar'}); 
    } 
} 

Answer 2

ようにそれを実行します。React Constructor Docs

は、次のようにだからあなたのコードは次のようになります。

class MyClass extends Component { 
    constructor(props) { 
    super(props); 

    if (props.foo === 'bar') { 
     this.state = {foo: 'bar'}; 
    } else { 
     this.state = {foo: 'notBar'}; 
    } 
    } 
} 

しかし、それは唯一のコンストラクタで設定されていますので、親の中で小道具への変更は、このコンポーネントで更新されないことに注意してください。

これは、親の小道具が変更されることを期待していない場合に状態を初期化するための良い方法ですが、それはおそらくまれです。より良い方法でコンポーネントを設計するためのガイドについてはLifting State Upをご覧ください。