Reactのライフサイクル

React v16.3

新しいライフサイクル関数が追加されました。

static getDerivedStateFromProps(nextProps, prevState) {
  /* 戻り値：処理後の新しいState、変更なければ、nullで返す */
  // v17からcomponentWillReceivePropsが削除されるので、基本同様な機能実現できます。
  // getDerivedStateFromPropsが初回描画も呼ばれます
}

getSnapshotBeforeUpdate(prevProps, prevState) {
  // DOMが変更される前に呼ばれます。
  // 戻り値はcomponentDidUpdateの三つ目パラメータとして渡されます。
}

UNSAFE_componentWillMount(){
  // v17からcomponentWillMountが削除されます
}

UNSAFE_componentWillReceiveProps() {
  // v17からcomponentWillReceivePropsが削除されます
}

UNSAFE_componentWillUpdate() {
  // v17からcomponentWillUpdateが削除されます
}

React v16.2 以前

getDefalutProps(){
  /* 全体で一度しか呼ばれない */
  /* インスタンス作成時に親コンポーネントが値を指定しなかった時だけ、ここの値が使用される */
  /* 戻り値：Propsのキーと初期値(バリュー) */
}

getInitialState(){
  /* インスタンス作成毎に呼ばれる */
  /* 描画前にコンポーネントの状態を変更する最後のチャンス */
  /* 戻り値：Stateのキーと初期値(バリュー) */
}

componentWillMount(){
  /* 初回の描画時にのみ呼び出される */
  /* コンポーネントがページに追加される直前に呼び出される */
  /* 引数も戻り値もなし */
}

/* 描画 */
render: function(){
  /* 戻り値：ReactのElement */
}

/* 描画後 */
componentDidMount(){
  /* 初回の描画完了後に呼ばれる */
  /* ここではじめて実際のDOMの操作が出来る(React.findDOMNode(this)) */
}

/* 再描画前 */
componentWillReceiveProps(nextProps) {
  /* 引数 : 親から送られた値(props) */
  /* 親コンポーネントのstate等が変更されて、再描画が発生する際に呼ばれる */
  /* ただしこの時点ではthis.propsは変わっていない */
}

/* 再描画キャンセル */
shouldComponentUpdate(nextProps, nextState) {
  /* falseを返すと、componentWillUpdateとcomponentDidUpdateとrenderをskipする */
  /* propsやstateが変わっても描画内容に変更がないとわかるときにパフォーマンスを早くするために使用 */
}

componentWillUpdate(nextProps, nextState){
  /* propsとstateの更新による再描画が行われる直前に呼び出される */
  /* stateやpropsは変更できない */
}

/* 再描画後 */
componentDidUpdate(prevProps, prevState){
  /* 再描画後に実際のDOMにアクセスするためのメソッド */
}

/* コンポーネント破棄時 */
componentWillUnmount() {
  /* コンポーネント削除時に呼び出される */
}