react如何注销
React 组件的注销方法
在 React 中，组件的注销通常指的是在组件卸载时执行清理操作，例如取消订阅、清除定时器或释放资源。以下是几种常见的方法：
使用 useEffect 钩子的清理函数
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 组件挂载时的操作
const timer = setInterval(() => {
console.log('Timer running');
}, 1000);
// 返回清理函数，组件卸载时执行
return () => {
clearInterval(timer);
console.log('Component unmounted');
};
}, []);
return <div>My Component</div>;
}类组件中的 componentWillUnmount
import React from 'react';
class MyComponent extends React.Component {
componentDidMount() {
this.timer = setInterval(() => {
console.log('Timer running');
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
console.log('Component unmounted');
}
render() {
return <div>My Component</div>;
}
}取消事件监听
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const handleClick = () => {
console.log('Clicked');
};
window.addEventListener('click', handleClick);
return () => {
window.removeEventListener('click', handleClick);
};
}, []);
}取消网络请求
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('Request aborted');
}
});
return () => {
controller.abort();
};
}, []);
}注意事项
- 清理函数在组件卸载时自动执行，无需手动调用。
- 确保清理函数中处理了所有需要释放的资源，避免内存泄漏。
- 对于类组件，
componentWillUnmount是唯一用于清理的生命周期方法。 - 函数组件中，
useEffect的清理函数可以多次执行（当依赖项变化时），而类组件的componentWillUnmount只会在卸载时执行一次。
