画面読み込み終了後に呼び出す処理【React】

■はじめに

「render」から呼び出すと複数回呼び出されますが、画面読み込み後に「1回だけ呼び出したい」場合の書き方を紹介します。

APIでデータを取得したい場合や、DOMを書き換えたい場合には、ここで処理する方が良いと思います。

■手順

ソースコードの全量は以下

import React from 'react';

class App extends React.Component{
  componentDidMount() {
    // 読み込み後処理
  }
  render()
  {
    return (
      <div>
        <h1>HELLO</h1>
      </div>
    );
  }
}

export default App;

「componentDidMount」が画面読み込み後に呼び出される処理です。

このなかで、APIの実行などを行いましょう。