在umi react 组件中 实现一个参数 在进入该组件 启动计时器 每秒+1 离开组件销毁 定时器
时间: 2024-05-15 20:19:23 浏览: 105
Todolist.zip
可以在组件的 `componentDidMount` 生命周期函数中启动计时器,并在 `componentWillUnmount` 生命周期函数中销毁定时器。
例如:
```jsx
import React, { Component } from 'react';
class Timer extends Component {
state = {
time: 0
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState(prevState => ({
time: prevState.time + 1
}));
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div>
<h1>Timer: {this.state.time}s</h1>
</div>
);
}
}
export default Timer;
```
在这个例子中,我们在组件的 `componentDidMount` 生命周期函数中启动计时器,并将其赋值给了组件的实例变量 `this.timer`。每秒钟更新一次时间状态。
在组件的 `componentWillUnmount` 生命周期函数中,我们清除了计时器,以防止在组件销毁时计时器仍在运行,导致内存泄漏。
这样,当我们在页面中使用这个组件时,它会在进入时启动计时器,在离开时销毁计时器。
阅读全文