画面読み込み終了後に呼び出す処理【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の実行などを行いましょう。

コメントを残す