React componentWillUnmount() メソッド
React コンポーネントライフサイクルcomponentWillUnmount() メソッドの形式は次のとおりです：
componentWillUnmount()
componentWillUnmount() メソッドは、コンポーネントのアンマウントおよび破棄の前に直接呼び出されます。
componentWillUnmount() メソッド内では setState() を呼び出すべきではありません。そのコンポーネントは決して再レンダリングされないからです。コンポーネントインスタンスがアンマウントされた後は、再びマウントされることはありません。
以下の例ではcomponentWillUnmount()メソッドはコンポーネントが DOM から削除される直前に呼び出されます：
例
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>タイトルコンポーネントを削除</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("タイトルコンポーネントがアンマウントされようとしています。");
}
render() {
return (
<h1>Hello サンプル!</h1>
);
}
}
試してみる »