【React初心者向け】componentDidMountでできることとは？サンプルコードでわかりやすく解説
ReactJS における componentDidMount() でのコンポーネント状態設定解説
状態設定のタイミング
コンポーネントの状態は、this.setState() メソッドを使用して設定できます。このメソッドは、コンポーネントのレンダリングをトリガーします。componentDidMount() 内で this.setState() を呼び出すことで、コンポーネントが初めてレンダリングされる前に状態を初期化することができます。
状態設定の例
以下のコード例は、componentDidMount() 内でコンポーネントの状態を初期化する方法を示しています。
class MyComponent 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() {
const { data } = this.state;
if (!data) {
return <div>Loading...</div>;
}
return (
<div>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</div>
);
}
}
この例では、MyComponent コンポーネントは componentDidMount() メソッド内で fetch() API を使用してデータを取得します。データを取得したら、this.setState() メソッドを使用してコンポーネントの状態を更新します。これにより、コンポーネントがレンダリングされ、取得したデータが表示されます。
注意点
componentDidMount() 内で this.setState() を呼び出す場合、状態更新が完了する前にコンポーネントがレンダリングされる可能性があります。そのため、レンダリング時に状態にアクセスする必要がある場合は、setState() メソッド内のコールバック関数を使用する必要があります。
class MyComponent extends React.Component {
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => this.setState(data, () => {
console.log('State updated');
}));
}
// ...
}
この例では、setState() メソッド内のコールバック関数で console.log() を呼び出しています。これは、状態更新が完了したことを確認するための方法です。
componentDidMount() は、コンポーネントの状態を初期化したり、データのフェッチなどの非同期処理を実行したりするのに適しています。this.setState() メソッドを使用して状態を更新し、レンダリング時に状態にアクセスする必要がある場合は、コールバック関数を使用する必要があります。
例1: データのフェッチと状態設定
この例では、fetch() API を使用して API エンドポイントからデータを取得し、取得したデータをコンポーネントの状態に設定します。
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
if (!data) {
return <div>Loading...</div>;
}
return (
<div>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</div>
);
};
export default MyComponent;
例2: タイマーを使用した状態更新
この例では、setInterval() 関数を使用してタイマーを設定し、一定時間ごとにコンポーネントの状態を更新します。
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => setCount(count + 1), 1000);
return () => clearInterval(interval);
}, []);
return <div>カウント: {count}</div>;
};
export default MyComponent;
例3: フォーム入力値に基づいた状態更新
この例では、フォームの入力値に基づいてコンポーネントの状態を更新します。
import React, { useState } from 'react';
const MyComponent = () => {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>名前: {name}</p>
</div>
);
};
export default MyComponent;
これらの例は、componentDidMount() を使用してコンポーネントの状態を設定する方法のほんの一例です。componentDidMount() は、さまざまな目的に使用できる汎用的なメソッドです。
補足
useStateフックは、コンポーネントの状態を管理するためのフックです。useEffectフックは、副作用処理を実行するためのフックです。fetch()APIは、HTTP リクエストを送信するための API です。setInterval()関数は、一定時間ごとに関数を呼び出すための関数です。clearInterval()関数は、タイマーをクリアするための関数です。
これらの概念を理解することで、ReactJS コンポーネントで componentDidMount() を効果的に使用することができます。
componentDidMount() 以外でコンポーネント状態を設定する方法
コンポーネントの初期状態は、コンポーネントの constructor メソッド内で設定できます。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
const { count } = this.state;
return <div>カウント: {count}</div>;
}
}
この例では、MyComponent コンポーネントの初期状態は count: 0 になります。
イベントハンドラを使用して、ユーザーの操作に応じてコンポーネント状態を更新できます。
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>カウントアップ</button>
<div>カウント: {count}</div>
</div>
);
};
export default MyComponent;
この例では、ボタンをクリックすると handleClick 関数が呼び出され、コンポーネント状態 count が 1 増えます。
親コンポーネントからプロパティとして状態を渡すことで、子コンポーネントで状態を更新できます。
import React, { useState } from 'react';
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} setCount={setCount} />
</div>
);
};
const ChildComponent = ({ count, setCount }) => {
return (
<div>
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
<div>カウント: {count}</div>
</div>
);
};
export default ParentComponent;
この例では、ParentComponent コンポーネントは count と setCount プロパティを ChildComponent コンポーネントに渡します。ChildComponent コンポーネントは、これらのプロパティを使用して状態を更新できます。
Redux などの状態管理ライブラリを使用すると、コンポーネント間で状態を共有し、一元的に管理することができます。
componentDidMount() は、コンポーネントが DOM にマウントされた後に一度だけ実行されるため、コンポーネントの状態を初期化したり、データのフェッチなどの非同期処理を実行したりするのに適しています。しかし、componentDidMount() 以外にも、コンポーネント状態を設定する方法があります。状況に応じて適切な方法を選択してください。
reactjs
