当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


ReactJS componentWillUnmount()用法及代码示例


当组件从DOM(文档对象模型)中销毁或卸载时,componentWillUnmount()方法允许我们执行React代码。在React Life-cycle的Unmounting阶段即组件卸载之前调用此方法。

所有清除(例如使计时器失效,取消网络请求或清除在componentDidMount()中创建的订阅)都应在componentWillUnmount()方法块中进行编码。

提示:切勿使用componentWillUnmount()方法调用setState()。

用法:

componentWillUnmount()

创建React应用程序:



步骤1:使用以下命令创建React应用程序:

npx create-react-app functiondemo

第2步:创建项目文件夹(即functiondemo)后,使用以下命令将其移至该文件夹:

cd functiondemo

项目结构:如下图所示。

项目结构

例:在此示例中,我们将构建一个名称颜色应用程序,当在DOM树中呈现组件时,该应用程序将更改文本的颜色。

App.js:现在在App.js文件中写下以下代码。在这里,App是我们编写代码的默认组件。

Javascript

import React from 'react';
class ComponentOne extends React.Component {
 
  // Defining the componentWillUnmount method
  componentWillUnmount() {
    alert('The component is going to be unmounted');
  }
 
  render() {
    return <h1>Hello Geeks!</h1>;
  }
}
 
class App extends React.Component {
  state = { display:true };
  delete = () => {
    this.setState({ display:false });
  };
 
  render() {
    let comp;
    if (this.state.display) {
      comp = <ComponentOne />;
    }
    return (
      <div>
        {comp}
        <button onClick={this.delete}>
          Delete the component
        </button>
      </div>
    );
  }
}
 
export default App;


注意:您可以在App.css文件中定义自己的样式。

运行应用程序的步骤:从项目的根目录中使用以下命令运行应用程序:



npm start

输出:

参考: https://reactjs.org/docs/react-component.html#componentwillunmount

react-js-img

相关用法


注:本文由纯净天空筛选整理自rbbansal大神的英文原创作品 ReactJS componentWillUnmount() Method。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。