React componentDidUpdate() メソッド
React コンポーネントのライフサイクルcomponentDidUpdate() メソッドの形式は次のとおりです：
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate() メソッドはコンポーネントの更新後すぐに呼び出されます。
最初のレンダリングではこのメソッドは実行されません。
componentDidUpdate() 内で直接 setState() を呼び出すこともできますが、条件文でラップする必要があることに注意してください。
以下の例では使用しますcomponentDidUpdate()メソッドはコンポーネント更新後に実行され、コンポーネントはcomponentDidMount()メソッドは1秒後に変更操作が行われます：
実例
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "サンプル"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritesite: "google"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"更新後に好きなのは" + this.state.favoritesite;
}
render() {
return (
<div>
<h1>私の好きなウェブサイトは{this.state.favoritesite}</h1>
<div id="mydiv"></div>
</div>
);
}
}
試してみる »