您的位置：首页 > 编程技术 > js  >  React中使用setInterval函数的实例

React中使用setInterval函数的实例

 更新时间：2021年4月6日 15:01  点击：2632

本文是基于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;

到此这篇关于React中使用setInterval函数的实例的文章就介绍到这了,更多相关React中使用setInterval函数内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • php正确禁用eval函数与误区介绍

    eval函数在php中是一个函数并不是系统组件函数，我们在php.ini中的disable_functions是无法禁止它的，因这他不是一个php_function哦。 eval()针对php安全来说具有很...2016-11-25

  • php中eval()函数操作数组的方法

    在php中eval是一个函数并且不能直接禁用了，但eval函数又相当的危险了经常会出现一些问题了，今天我们就一起来看看eval函数对数组的操作 例子， <?php $data="array...2016-11-25

  • Python astype(np.float)函数使用方法解析

    这篇文章主要介绍了Python astype(np.float)函数使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-08

  • Python中的imread()函数用法说明

    这篇文章主要介绍了Python中的imread()函数用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-16

  • C# 中如何取绝对值函数

    本文主要介绍了C# 中取绝对值的函数。具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25

  • C#学习笔记- 随机函数Random()的用法详解

    下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • 金额阿拉伯数字转换为中文的自定义函数

    CREATE FUNCTION ChangeBigSmall (@ChangeMoney money) RETURNS VarChar(100) AS BEGIN Declare @String1 char(20) Declare @String2 char...2016-11-25

  • 关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)

    这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12

  • Android开发中findViewById()函数用法与简化

    findViewById方法在android开发中是获取页面控件的值了，有没有发现我们一个页面控件多了会反复研究写findViewById呢，下面我们一起来看它的简化方法。 Android中Fin...2016-09-20

  • C++中 Sort函数详细解析

    这篇文章主要介绍了C++中Sort函数详细解析，sort函数是algorithm库下的一个函数，sort函数是不稳定的，即大小相同的元素在排序后相对顺序可能发生改变...2022-08-18

  • PHP用strstr()函数阻止垃圾评论(通过判断a标记)

    strstr() 函数搜索一个字符串在另一个字符串中的第一次出现。该函数返回字符串的其余部分（从匹配点）。如果未找到所搜索的字符串，则返回 false。语法：strstr(string,search)参数string，必需。规定被搜索的字符串。 参数sea...2013-10-04

  • PHP函数分享之curl方式取得数据、模拟登陆、POST数据

    废话不多说直接上代码复制代码 代码如下:/********************** curl 系列 ***********************///直接通过curl方式取得数据(包含POST、HEADER等)/* * $url: 如果非数组，则为http;如是数组，则为https * $header:...2014-06-07

  • php中的foreach函数的2种用法

    Foreach 函数（PHP4/PHP5）foreach 语法结构提供了遍历数组的简单方式。foreach 仅能够应用于数组和对象，如果尝试应用于其他数据类型的变量，或者未初始化的变量将发出错误信息。...2013-09-28

  • C语言中free函数的使用详解

    free函数是释放之前某一次malloc函数申请的空间，而且只是释放空间，并不改变指针的值。下面我们就来详细探讨下...2020-04-25

  • PHP函数strip_tags的一个bug浅析

    PHP 函数 strip_tags 提供了从字符串中去除 HTML 和 PHP 标记的功能，该函数尝试返回给定的字符串 str 去除空字符、HTML 和 PHP 标记后的结果。由于 strip_tags() 无法实际验证 HTML，不完整或者破损标签将导致更多的数...2014-05-31

  • SQL Server中row_number函数的常见用法示例详解

    这篇文章主要给大家介绍了关于SQL Server中row_number函数的常见用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • PHP加密解密函数详解

    分享一个PHP加密解密的函数，此函数实现了对部分变量值的加密的功能。 加密代码如下： /* *功能：对字符串进行加密处理 *参数一：需要加密的内容 *参数二：密钥 */ function passport_encrypt($str,$key){ //加密函数 srand(...2015-10-30

  • php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法

    最近遇到一个问题，就是在使用php的mail函数发送utf-8编码的中文邮件时标题出现乱码现象，而邮件正文却是正确的。最初以为是页面编码的问题，发现页面编码utf-8没有问题啊，找了半天原因，最后找到了问题所在。 1.使用 PEAR 的...2015-10-21

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • C#中加载dll并调用其函数的实现方法

    下面小编就为大家带来一篇C#中加载dll并调用其函数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25