React入門の第9回は、Reactのライフサイクルについて解説を行います。

Reactではコンポーネントは状態の変化(ライフサイクル)により発火する様々なライフサイクルメソッドが用意されており、コンポーネントの状態に応じて色々な操作ができるようになっています。

ライフサイクルメソッドの種類

用意されているライフサイクルメソッドは以下の7種類です

componentWillMount()

コンポーネントがマウント(配置)される直前に呼び出されるメソッド。

このメソッド内でsetStateでstateを変更すると描画時には変更されたstateで描画されます。

componentDidMount()

コンポーネントがマウント(配置)された直前に呼び出されるメソッド。

以下のように指定することで状態変化に応じた処理を行うことができます。
このメソッド内では描画されたDOMにアクセスすることができます。

componentWillReceiveProps()

コンポーネントが受け取るpropsが変化した場合に呼び出されるメソッド。
このメソッド内でsetStateでStateを変更すると描画時には変更されたstateで描画されます。

shouldComponentUpdate()

stateもしくはporpsが変更された際のコンポーネントの再描画前に呼び出されるメソッド。
このメソッドでtrueを返した場合はコンポーネントは再描画され、falseを返した場合は再描画されない。
パフォーマンスの観点から再描画を抑制したい場合に利用される。

componentWillUpdate()

コンポーネントの再描画前に呼び出されるメソッド。
前述のshouldComponentUpdate()でfalseを返している場合はこのメソッドは呼び出されない。

componentDidUpdate()

コンポーネントが再描画されたタイミングで呼び出されるメソッド。
このメソッド内では再描画されたDOMにアクセスすることができます。

ライフサイクルメソッドの指定方法

ライフサイクルメソッドは以下のようにしてclass内で直接指定を行います

//コンポーネントの作成
class Number extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount(){
    console.log("コンポーネントのマウント前")
  }
  componentDidMount(){
    console.log("コンポーネントのマウント後")
  }
  componentWillReceiveProps(){
    console.log("コンポーネントが受け取るpropsが変化")
  }
  shouldComponentUpdate(){
    console.log("コンポーネントがアップデートされる前1")
    return true;
  }
  componentWillUpdate(){
    console.log("コンポーネントがアップデートされる前2")
  }
  componentDidUpdate(){
    console.log("コンポーネントがアップデートされた後")
  }
  componentWillUnmount(){
    console.log("コンポーネントがアンマウントされた後")
  }
  render() {
    return (
      <div>コンポーネント