react 中使用定时器 Timers(定时器)

71 阅读 0 评论 47 点赞

我是靠谱客的博主优秀鱼，这篇文章主要介绍react 中使用定时器 Timers(定时器)，现在分享给大家，希望可以做个参考。

setTimeout,clearTmeout
setInterval,clearInterval

在 class 中

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class TimersDemo extends Component {
constructor(props) {
super(props);
this.state={
content:'',
}
}
componentDidMount() {
this.timer = setTimeout(
() => {
this.setState({content:'我是定时器打印的内容...One'})
},
500
);
this.timer_two = setTimeout(
() => {
this.setState({msg:'我是定时器打印的内容...Two'})
},
1000
);
}
componentWillUnmount() {
this.timer && clearTimeout(this.timer);
this.timer_two && clearTimeout(this.timer_two);
}
render() {
return (
<View style={{margin:20}}>
<Text style={styles.welcome}>
定时器实例
</Text>
<Text>{this.state.content}</Text>
<Text>{this.state.msg}</Text>
</View>

);
}
}

复制代码

1
2
setTimeout
延时的定时执行

复制代码

1
2
3
4
5
6
7
8
9
10
11
<CustomButton text='测试setInterval'
onPress={()=>{
this.interval=setInterval(() => {this.setState({sum:(this.state.sum+1)});
},400);
}}
/>
<CustomButton text='clearInterval'
onPress={()=>{
this.interval && clearInterval(this.interval);
}}
/>