当前位置 博文首页 > 文章内容

    React中使用setInterval函数的实例

    作者:21344 栏目:未分类 时间:2021-04-06 14:45:00

    本文是基于Windows 10系统环境,学习和使用React:Windows 10


    一、setInterval函数

    (1) 定义

    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

    (2) 实例

    import React, { Component } from 'react';
    import { Radio, Button, Icon } from 'antd';
    
    class List extends Component {
      constructor(props) {
        super(props);
        this.state = {
          online: false,
        };
      };
    
      handleLogin=()=>{
        localStorage.setItem('username','xuzheng');
      };
    
      handleLogout=()=>{
        localStorage.removeItem('username');
      };
    
      componentDidMount(){
        this.timer = setInterval(() => {
          this.setState({
            online: localStorage.username ? true : false,
          })
        }, 1000);
      }
    
      componentWillUnmount() {
        if (this.timer != null) {
          clearInterval(this.timer);
        }
      }
    
      render() {
        return (
          <div>
            <div>
              <Icon type='user' style={{marginRight:'8px'}}/>
              <span>{localStorage.username ? localStorage.username : '未登录'}</span>
            </div>
            <div style={{marginTop:'20px'}}>
              <Button type='primary' onClick={this.handleLogin}>登录</Button>
            </div>
            <div style={{marginTop:'20px'}}>
              <Button type='primary' onClick={this.handleLogout}>退出</Button>
            </div>
          </div>
        )
      }
    }
    
    export default List;