React


コンポーネントのライフサイクル


3.1 ライフサイクルメソッド

3.1.1 コンポーネント作成時

下記の順番に呼び出される

3.1.2 コンポーネント作成後

3.1.3 コンポーネント破棄時

3.2 コンポーネント作成時に呼ばれるメソッド

3.2.1 getDefaultProps

インスタンス作成時に1回のみ呼び出される。 返されるオブジェクトは、親コンポーネントが値を指定しない場合に、初期値として使われる。

オブジェクトや配列なのど非スカラー値を返す場合、それはインスタンスごとに複製されず、すべてのコンポーネントで共有される。

3.2.2 getInitialState

状態の初期化をします。 このメソッドが呼び出される時点で this.props が利用可能となる。

3.2.3 componentWillMount

初回の描画(render)の直前に呼び出されます。 renderメソッドが呼び出される前にコンポーネントの状態を変更したい場合に利用します。

3.2.4 render

コンポーネントの出力表現となる仮想DOMを作成します。  Reactコンポーネントの中で唯一省略できないライフサイクルメッソドです。

3.2.5 componentDidMount

初回の描画が成功しDOMが表示されると、このメソッドの中で React.findDOMNode(this)経由で 実際のDOMにアクセスできる。

表示された要素の高さを調べたり、タイマーを設定したり、jQueryのプラグインを利用したりするときに使用します

コンポーネント作成後に呼び出されるメソッド

3.3.1 componentWillReceiveProps

コンポーネントの属性(props)は、親コンポーネントにより変更されます、その時にこのメッソドが呼ばれるので propsの値を参照してstateの変更や、その他の処理を行うことができる。

3.3.2 shouldComponentUpdate

このメソッドを使用し最適化を行い速度を速めます。 propsやstateが変更されたが、 コンポーネント、その子ノードの表示に影響がない場合にfalseを返す。 falseの時、componentWillUpdate,render,componentDidUpdateはスキップされる

3.3.3 componentWillUpdate

propsとstateの更新による描画が行われる直前に呼び出されます。 このメッソドでpropsとstateの変更はできません。 実行時に変更をしたいのであればcomponentWillReceivePropsで行う。

3.3.4 componentDidUpdate

実際に表示されたDOMの参照へのアクセスに使用される

3.4 コンポーネントの破棄時に呼ばれるメソッド

3.4.1 componentWillUnmount

コンポーネントは最後に削除され、その直前に呼び出されます。 componentDidMountの中で、タイマーを作成したり、リスナーを追加した場合には、ここでリセットしなければいけない

3.5 アンチパターン:加工された値をstateに保存する

getInitialStateで、this.propsの値を元にstateを変更することが可能なため、アンチパターンが生じる。 Reactでは「単一の情報源」(a single source of truth)を守ることが重要です。

しかしpropsの値を加工してstateに保存することはアンチパターンとみなされています。 例えばprops経由で渡された日付を文字列に変換してstateに保存するとか、 propsの文字列を大文字に変換してstateに格納するなどです。 これらは描画時に行うべき加工で、stateではない。

*** アンチパターン:加工された値を state に保存してはいけない

getdefaultProps: function(){
  return  {
    date: new Date() 
  };
},
getInitialState: function(){
  return {
    day: this.props.date.getDay()
  };
},
render: function(){
  return <div>Day: {this.props.day}</div>;
}

*** 正しくはstate描画時に加工する

getdefaultProps: function(){
  return  {
    date: new Date() 
  };
},
render: function(){
  var day = this.props.date.getDay();
  return <div>Day: {day}</div>;
}

同期をとる必要が無くてpropsの値をstateの初期値として使いたい場合には、 getInitialStateでpropsを返します。 明確化のためにpropsの名前にinitialというプリフィックスを付けましょう。

getdefaultProps: function(){
  return  {
    initialValue: 'some-default-value' 
  };
},
getInitialState: function(){
  return {
    value: this.props.initialValue
  };
},
render: function(){
  return <div>{this.state.value}</div>;
}