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

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

Reactのライフサイクルメソッドを使用したTypeScriptの例をいくつか紹介します。

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

import React, { Component } from 'react';

interface State {
  count: number;
}

class LifecycleExample extends Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('コンポーネントがマウントされました');
  }

  componentDidUpdate(prevProps: {}, prevState: State) {
    console.log('コンポーネントが更新されました');
  }

  componentWillUnmount() {
    console.log('コンポーネントがアンマウントされました');
  }

  render() {
    return (
      <div>
        <p>カウント: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          増やす
        </button>
      </div>
    );
  }
}

export default LifecycleExample;

フックを使用したライフサイクルメソッド

関数コンポーネントでは、useEffectフックを使用してライフサイクルメソッドと同様の機能を実現します。

import React, { useState, useEffect } from 'react';

const LifecycleExample: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('コンポーネントがマウントされました');

    return () => {
      console.log('コンポーネントがアンマウントされました');
    };
  }, []);

  useEffect(() => {
    console.log('コンポーネントが更新されました');
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
};

export default LifecycleExample;

各ライフサイクルメソッドの概要

• componentDidMount: コンポーネントが初めてDOMにマウントされた後に呼ばれます。

データのフェッチやサブスクリプションの設定に使用されます。

• componentDidUpdate: コンポーネントが更新された後に呼ばれます。

更新後のDOM操作や追加のデータのフェッチに使用されます。

• componentWillUnmount: コンポーネントがDOMからアンマウントされる直前に呼ばれます。

サブスクリプションの解除やタイマーのクリアに使用されます。

• useEffect: 関数コンポーネントにおいて、componentDidMount、componentDidUpdate、およびcomponentWillUnmountのすべての機能を一つのフックで実現します。

これらの例がReactのライフサイクルメソッドを使用した例です。