React コンポーネントのライフサイクル
この章では、React コンポーネントのライフサイクルについて説明します。
コンポーネントのライフサイクルは3つの状態に分けられます：
- Mounting（マウント）：実際の DOM に挿入済み
- Updating（更新）：再レンダリング中
- Unmounting（アンマウント）：実際の DOM から取り出し済み
マウント
コンポーネントインスタンスが作成され DOM に挿入されるとき、ライフサイクルの呼び出し順序は次のとおりです：
constructor(): React コンポーネントがマウントされる前に、そのコンストラクタが呼び出されます。getDerivedStateFromProps(): render メソッドを呼び出す前に呼び出され、初期マウントおよびその後の更新時にも呼び出されます。render(): render() メソッドはクラスコンポーネントで唯一必須のメソッドです。componentDidMount(): コンポーネントのマウント後（DOM ツリーへの挿入後）にすぐに呼び出されます。
render() メソッドはクラスコンポーネントで唯一必須のメソッドであり、他のメソッドは必要に応じて実装できます。
これらのメソッドの詳細は、以下を参照してください：公式ドキュメント。
更新
コンポーネントの state または props が変化するたびに、コンポーネントは更新されます。
コンポーネントの props または state が変化すると更新がトリガーされます。コンポーネント更新時のライフサイクル呼び出し順序は次のとおりです：
getDerivedStateFromProps(): render メソッドを呼び出す前に呼び出され、初期マウントおよびその後の更新時にも呼び出されます。shouldComponentUpdate() の戻り値に基づいて、現在の state または props の変更が React コンポーネントの出力に影響を与えるかどうかを判断します。shouldComponentUpdate(): props または state が変化したとき、shouldComponentUpdate() はレンダリングの実行前に呼び出されます。render(): render() メソッドはクラスコンポーネントで唯一必須のメソッドです。getSnapshotBeforeUpdate(): 直近のレンダリング出力（DOM ノードへのコミット）の前に呼び出されます。componentDidUpdate(): 更新後にすぐに呼び出されます。
render() メソッドはクラスコンポーネントで唯一必須のメソッドであり、他のメソッドは必要に応じて実装できます。
これらのメソッドの詳細は、以下を参照してください：公式ドキュメント。
アンマウント
コンポーネントが DOM から削除されるときに呼び出されるメソッドは次のとおりです：
componentWillUnmount(): コンポーネントのアンマウントおよび破棄の直前に呼び出されます。
これらのメソッドの詳細は、以下を参照してください：公式ドキュメント。
インスタンス
以下は現在時刻のインスタンスで、毎秒更新されます：
インスタンス
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 (
<div>
<h1>Hello, サンプル!</h1>
<h2>現在の時刻は：{this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
const root = ReactDOM.createRoot(document.body);
root.render(
<Clock />
);
試してみる »
以下のインスタンスは、Hello コンポーネントのロード後、componentDidMount メソッドでタイマーを設定し、100ミリ秒ごとにコンポーネントの透明度を再設定して再レンダリングします：
React インスタンス
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {opacity: 1.0};
}
componentDidMount() {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
}
render () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Hello name="world"/>
);
試してみる »
以下のインスタンスは初期化し、state ， setNewnumber更新に使用します。state。すべてのライフサイクルはContentコンポーネント内にあります。
React インスタンス
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { data: 0 };
this.setNewNumber = this.setNewNumber.bind(this);
}
setNewNumber() {
this.setState({ data: this.state.data + 1 });
}
render() {
return (
<div>
<button onClick={this.setNewNumber}>INCREMENT</button>
<Content myNumber={this.state.data} />
</div>
);
}
}
class Content extends React.Component {
componentDidMount() {
console.log("Component DID MOUNT!");
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentDidUpdate(prevProps, prevState) {
console.log("Component DID UPDATE!");
}
componentWillUnmount() {
console.log("Component WILL UNMOUNT!");
}
render() {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
<Button />
</div>
);
試してみる »