ライフサイクルメソッドとは？

React.jsのライフサイクルメソッドは、コンポーネントの生成、更新、破棄時に特定の処理を行うために使用されます。これにより、コンポーネントの状態管理や外部リソースの操作を行うことが可能です。

  
  class Clock extends React.Component {
    constructor(props) {
      super(props);
      this.state = { date: new Date() };
    }

    componentDidMount() {
      this.timerID = setInterval(
        () => this.tick(),
        1000
      );
    }

    componentWillUnmount() {
      clearInterval(this.timerID);
    }

    tick() {
      this.setState({
        date: new Date()
      });
    }

    render() {
      return (
        

          
Hello, world!
          
It is {this.state.date.toLocaleTimeString()}.
        
      );
    }
  }
  

主なライフサイクルメソッドの種類と役割

ライフサイクルメソッドには、`componentDidMount`や`componentDidUpdate`、`componentWillUnmount`などがあります。これらを使うことで、コンポーネントの状態管理やサイドエフェクト処理を効率的に行えます。

  
  class Example extends React.Component {
    componentDidMount() {
      // コンポーネントがマウントされたときに呼び出される
      console.log('Component did mount');
    }

    componentDidUpdate(prevProps, prevState) {
      // コンポーネントが更新されたときに呼び出される
      console.log('Component did update');
    }

    componentWillUnmount() {
      // コンポーネントがアンマウントされる直前に呼び出される
      console.log('Component will unmount');
    }

    render() {
      return 
Hello, world!
;
    }
  }
  

実際のアプリでライフサイクルメソッドを使ってみよう

React.jsアプリケーションでライフサイクルメソッドを使って、状態の更新やサイドエフェクトを管理しましょう。以下は、コンポーネントの生成時にAPIからデータを取得する例です。

  
  class DataFetcher extends React.Component {
    constructor(props) {
      super(props);
      this.state = { data: null };
    }

    componentDidMount() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }

    render() {
      return (
        

          
Fetched Data:
          
{JSON.stringify(this.state.data, null, 2)}

      );

    }

  }

  
React.jsのライフサイクルメソッド完全ガイドのまとめ
この記事では、React.jsのライフサイクルメソッドを学びました。コンポーネントの生成、更新、破棄に伴って処理を実行できるライフサイクルメソッドを活用して、より柔軟で効率的なアプリケーション開発を行いましょう。