ReactJS — コンポーネントのライフサイクルメソッド

React コンポーネントには、作成されてから破棄されるまでのイベントのライフサイクルがあります。これらのライフサイクルイベントにより、開発者はさまざまな時点でコンポーネントのライフサイクルに接続し、特定のアクションを実行できます。

以下に、React コンポーネントの主なライフサイクルメソッドと、それぞれの簡単な説明と使用方法の例を示します。

constructor(): このメソッドは、コンポーネントがマウントされる (DOM に挿入される) 前に呼び出されます。状態の初期化とイベントハンドラーのバインドに使用されます。

例：

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

例：

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

例：

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

例：

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

例：

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

主な React コンポーネントのライフサイクルメソッドの概要は次のとおりです。

constructor(): 状態を初期化し、イベントハンドラーをバインドします。コンポーネントがマウントされる前に呼び出されます。
componentDidMount(): コンポーネントがレンダリングされると、アクションまたは API 呼び出しをトリガーします。コンポーネントがマウントされた後に呼び出されます。
shouldComponentUpdate(): コンポーネントを更新する必要があるかどうかを示すブール値を返します。コンポーネントが再レンダリングされる前に呼び出されます。
componentDidUpdate(): コンポーネントの更新後にアクションまたは API 呼び出しをトリガーします。コンポーネントが更新された後に呼び出されます。
componentWillUnmount(): リソースまたはイベントリスナーをクリーンアップします。コンポーネントが破棄される直前に呼び出されます。
render(): コンポーネントの JSX をレンダリングします。コンポーネントを再レンダリングする必要があるときはいつでも呼び出されます。