react 生命周期函数 离开页面时
时间: 2023-10-26 08:16:04 浏览: 50
在 React 中,离开页面时可以通过 componentWillUnmount 生命周期方法来执行一些清理工作或取消未完成的异步请求。componentWillUnmount 方法会在组件被卸载(即从 DOM 中删除)之前被调用,可以在这个方法中执行一些清理工作,例如取消订阅事件、清除定时器和取消未完成的异步请求等。
例如,以下代码演示了如何在组件卸载时取消未完成的异步请求:
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { data: null };
this.fetchData = this.fetchData.bind(this);
}
componentDidMount() {
this.fetchData();
}
componentWillUnmount() {
// 在组件卸载时取消未完成的请求
if (this.cancelRequest) {
this.cancelRequest();
}
}
async fetchData() {
try {
const { data, cancel } = await axios.get('/api/data', {
cancelToken: new axios.CancelToken((c) => {
this.cancelRequest = c;
}),
});
this.setState({ data });
} catch (error) {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.log('Request error:', error.message);
}
}
}
render() {
// ...
}
}
```
在上面的例子中,我们使用 axios 库来发起异步请求,并且使用 cancel token 来取消未完成的请求。在 componentWillUnmount 方法中,我们会检查是否存在未完成的请求,如果存在则调用 cancelRequest 方法来取消请求。这样就可以避免在组件卸载时出现内存泄漏或错误。