ReactJS - componentWillUnmount（） 方法

---

---

组件是我们 React 应用程序的构建块。它们类似于我们组装起来建造更大建筑的乐高积木。componentWillUnmount（） 是每个组件可用的生命周期方法之一。

componentWillUnmount 方法是 React 类组件的一部分。React 在组件被移除或从屏幕上“卸载”之前调用它。这是清理任务（例如取消数据提取或停用订阅）的常用位置。

语法

componentWillUnmount() {
	 	// Cleanup and resource release logic here
}

参数

componentWillUnmount 不接受任何参数。这是一个生命周期函数，当组件要卸载时，React 会调用它。

返回值

componentWillUnmount 函数不应返回任何内容。它用于执行清理操作和释放资源，而不是返回值。

例子

让我们制作一个基本的示例应用程序来展示如何使用 React 类组件中的 componentWillUnmount 函数。在此示例中，我们将创建一个计数器应用，该应用在挂载组件时启动计时器，并在卸载组件时停止计时器。

import React, { Component } from 'react';

class App extends Component {
	 	state = {
	 	 	 count: 0,
	 	};
	 	timerID = null; 		
	 	componentDidMount() {
	 	 		
	 	 	 // Start the timer when the component mounts
	 	 	 this.timerID = setInterval(() => {
	 	 	 	 	this.setState((prevState) => ({ count: prevState.count + 1 }));
	 	 	 }, 1000);
	 	} 		
	 	componentWillUnmount() {
	 	 	 // Stop the timer when the component unmounts
	 	 	 clearInterval(this.timerID);
	 	} 		
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h1>Counter: {this.state.count}</h1>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default App;

输出

我们创建了一个扩展 Component 的 CounterApp 组件。在 componentDidMount 方法中，我们借助 setInterval 启动了一个计时器，以每秒更新计数状态。这是一个简单的计数器，每秒递增一次。在 componentWillUnmount 方法中，我们借助 clearInterval 停止计时器，以防止在卸载组件时发生内存泄漏。render 方法显示当前计数值。

此应用程序演示如何使用 componentWillUnmount 函数来清理资源。在我们的例子中，它是在卸载组件时停止计时器。

示例 − 用户配置文件应用程序

在这个应用程序中，我们将有一个用户配置文件显示，并且 componentWillUnmount（） 函数用于卸载组件时可能需要的任何清理。

UserProfileApp.js

import React, { Component } from 'react';
import './App.css';

class UserProfileApp extends Component {
	 	state = {
	 	 	 userProfile: {
	 	 	 	 	username: 'Akshay_Sharma',
	 	 	 	 	email: 'akshay@example.com',
	 	 	 },
	 	}; 		
	 	componentDidMount() {
	 	 		
	 	 	 // Fetch user profile data when the component mounts
	 	} 		
	 	componentWillUnmount() {
	 	 		
	 	 	 // Any cleanup needed for user profile app can be done here
	 	 	 console.log('UserProfileApp will unmount');
	 	} 		
	 	render() {
	 	 	 const { username, email } = this.state.userProfile;
	 	 	 return (
	 	 	 	 	<div className='App user-profile-container'>
	 	 	 	 	 	 <h1>User Profile</h1>
	 	 	 	 	 	 <p>Username: {username}</p>
	 	 	 	 	 	 <p>Email: {email}</p>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default UserProfileApp;

App.css

.user-profile-container {
	 	max-width: 400px;
	 	margin: auto;
	 	padding: 20px;
	 	border: 1px solid #ccc;
	 	border-radius: 8px;
	 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	 	background-color:rgb(224, 204, 178);
}
h1 {
	 	color: red;
}
p {
	 	margin: 8px 0;
	 	color: green;
}

输出

示例 - 倒数计时器应用程序

在这个应用程序中，我们将有一个倒数计时器，该计时器在组件挂载时开始，在组件即将卸载时停止。所以这个应用程序的代码如下 -

CountdownTimerApp.js

import React, { Component } from 'react';
import './App.css'

class CountdownTimerApp extends Component {
	 	state = {
	 	 	 time: 10,
	 	};
	 	timerID = null; 		
	 	componentDidMount() {
	 	 		
	 	 	 // Start the countdown timer when the component mounts
	 	 	 this.timerID = setInterval(() => {
	 	 	 	 	this.setState((prevState) => ({ time: prevState.time - 1 }));
	 	 	 }, 1000);
	 	} 		
	 	componentWillUnmount() {
	 	 		
	 	 	 // Stop the countdown timer when the component unmounts
	 	 	 clearInterval(this.timerID);
	 	} 		
	 	render() {
	 	 	 return (
	 	 	 	 	<div className='App'>
	 	 	 	 	 	 <h1>Countdown Timer: {this.state.time}s</h1>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default CountdownTimerApp;

输出

componentWillUnmount（） 方法用于在组件即将卸载时清理间隔或执行清理。

局限性

在 React 的 Strict 模式下进行开发时，React 可以使用 componentDidMount，立即调用 componentWillUnmount，然后再次调用 componentDidMount。这是一个有用的工具，用于识别 componentWillUnmount 的问题并确保它正确复制 componentDidMount。

总结

componentWillUnmount 是 React 类组件中的一种方法，用于在从屏幕中清除组件之前清理资源。对于停止数据提取和停用订阅等操作，它是必需的。我们通过复制 componentDidMount 的行为来确保我们的组件在其整个生命周期中平稳运行。