React componentWillUnmount() 方法

React 组件生命周期 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 Haodaima!</h1> ); } } ReactDOM.render(<Container />, document.getElementById('root'));

React 组件生命周期 React 组件生命周期