Reactのライフサイクルについて

Reactのライフサイクルについて

Reactのコンポーネントは、その存在期間中に特定の「ライフサイクルメソッド」を経ています。
これにより、コンポーネントのマウント、アップデート、アンマウント時の動作をカスタマイズできます。

マウント(Mount)

コンポーネントがDOMに追加されるプロセス。

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    // コンストラクタはコンポーネントが作成される際に一度だけ呼び出されます。
  }

  componentDidMount() {
    // コンポーネントがDOMにマウントされた直後に呼び出される。
  }
}

アップデート(Update)

コンポーネントのstateやpropsが変更されると発生するプロセス。

class SampleComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // このメソッドでfalseを返すと、再レンダリングをスキップできます。
    return true;
  }

  componentDidUpdate(prevProps, prevState) {
    // コンポーネントがアップデートされた後で呼び出される。
  }
}

アンマウント(Unmount)

コンポーネントがDOMから削除されるプロセス。

class SampleComponent extends React.Component {
  componentWillUnmount() {
    // コンポーネントがアンマウントされる直前に呼び出される。
  }
}

その他

この他にも、エラーが発生した際のライフサイクルメソッドや、非同期のライフサイクルに関するメソッドなどが存在します。
適切にこれらのメソッドを利用することで、コンポーネントのライフサイクルを効果的に制御できます。