React中使用setInterval函数的实例

本文是基于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函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React 错误边界组件的处理

    React 错误边界组件的处理

    这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下- React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载.从 React16 开始就是这样.但是同时React也引入了一个新的概念--错误边界. 定义,是什么 错误边界仍然是一种组件,可以捕获(打印或者其他方式)处理该组件的子组件树任何位置的 JavaScript 错误,并根据需要渲染出备用UI. 工作方式类似于try-catch,但是错误边界只用于 Rea

  • 编写简洁React组件的小技巧

    本文源于翻译文章 Simple tips for writing clean React components, 原文作者 Iskander Samatov 在这篇文章中,我们会回顾一些简单的技巧,它们将帮助我们编写更简洁的 React 组件,并且更好地扩展我们的项目. 避免使用扩展操作符传递 props 首先,让我们从一个应该避免的反模式开始.除非有明确的理由这样做,否则应该避免在组件树中使用扩展操作符传递props,比如:{ ...props }. 通过这种方式传递 props 确实可以更快

  • react实现Radio组件的示例代码

    react实现Radio组件的示例代码

    本文旨在用最清楚的结构去实现一些组件的基本功能.希望和大家一起学习,共同进步 效果展示: 测试组件: class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({ active: value }) } render() { return ( <div> <RadioGroup onChan

  • 详解react setState

    setState是同步还是异步 自定义合成事件和react钩子函数中异步更新state 以在自定义click事件中的setState为例 import React, { Component } from 'react'; class Test extends Component { constructor(props) { super(props); this.state = { count: 1 }; } handleClick = () => { this.setState({ count:

  • 吴恩达机器学习练习:SVM支持向量机

    吴恩达机器学习练习:SVM支持向量机

    1 Support Vector Machines 1.1 Example Dataset 1 %matplotlib inline import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sb from scipy.io import loadmat from sklearn import svm 大多数SVM的库会自动帮你添加额外的特征X₀已经θ₀,所以无需手动添加 ma

  • React中使用setInterval函数的实例

    本文是基于Windows 10系统环境,学习和使用React:Windows 10 一.setInterval函数 (1) 定义 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. (2) 实例 import React, { Component } fr

  • C语言中实现itoa函数的实例

    C语言中实现itoa函数的实例 一.原型: char *itoa( int value, char *string,int radix); 二.函数说明: value:欲转换的数据. string:目标字符串的地址. radix:转换后的进制数,可以是10进制.16进制等. 三.函数简单实现: #include <iostream> #include <string> using namespace std; char* My_itoa(int value,char str[],i

  • C#中异步回调函数用法实例

    本文实例讲述了C#中异步回调函数用法.分享给大家供大家参考.具体如下: static void Main(string[] args) { Func<string,string> showMessage = ShowMessage; //设置了回调函数Completed,不能有返回值 IAsyncResult result = showMessage.BeginInvoke("测试异步委托",new AsyncCallback(Completed),null); //半段异

  • jQuery中队列queue()函数的实例教程

    如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置. 该函数属于jQuery对象(实例).如果需要移除并执行队列中的第一个函数,请使用dequeue()函数.你也可以使用clearQueue()函数清空指定的队列. 语法 jQuery 1.2 新增该函数.queue()函数具有如下两种用法: 用法一: jQueryObject.queue( [ queueName ] [, newQueue ] ) 如

  • vc中SendMessage自定义消息函数用法实例

    本文实例讲述了vc中SendMessage自定义消息函数用法,分享给大家供大家参考.具体如下: SendMessage的基本结构如下: 复制代码 代码如下: SendMessage(     HWND hWnd,  //消息传递的目标窗口或线程的句柄.     UINT Msg, //消息类别(这里可以是一些系统消息,也可以是自己定义,下文具体介绍,)     WPARAM wParam, //参数1 (WPARAM 其实是与UINT是同种类型的,   //在vc编译器中右键有个"转到WPARA

  • C++中纯虚函数的实例详解

    目录 虚函数和纯虚函数 附:纯虚函数的应用 总结 虚函数和纯虚函数 之前学过虚函数,语法:virtual 返回值类型 函数名(参数列表),然后这个类也就变成的虚基类,然后子类重写父类的虚函数. 纯虚函数,语法:virtual 返回值类型 函数名(参数列表)=0,当类中有了纯虚函数,这个类也称为抽象类.抽象类特点:无法实例化对象,子类必须重写抽象类中的纯虚函数,否则也属于抽象类. class Base { public: virtual void Examp() = 0;//纯虚函数 ~Base(

  • Oracle中ROW_NUMBER()OVER()函数用法实例讲解

    目录 1. 说明: 2. 原理: 3.语法: 4.示例一: 5. 示例二 总结 Oracle中ROW_NUMBER() OVER()函数用法 1. 说明: ROW_NUMBER() OVER() 函数的作用:分组排序 2. 原理: row_number() over() 函数,over() 里的分组以及排序的执行晚于 where.group by.order by 的执行. 3.语法: row_number() over( partition by 分组列 order by 排序列 desc )

  • 详解React中setState回调函数

    在使用React过程中,中可以使用this.state来访问需要的某些状态,但是需要更新或者修改state时,一般而言,我们都会使用setState()函数,从而达到更新state的目的,setState()函数执行会触发页面重新渲染UI.但是!!!setState是异步的!!! 1. 语法: setState(updater[, callback]) // updater是要改变的state对象,callback是state导致的页面重新渲染的回调,等价于componentDidUpdate

  • JavaScript中的ubound函数使用实例

    JavaScript中ubound函数方法是返回在 VBArray 的指定维中所使用的最大索引值.使用方法: 复制代码 代码如下: safeArray.ubound(dimension) 其中safeArray是必选项.是一个 VBArray 对象. dimension是可选项.要获知其索引上界的 VBArray 的维数.如果忽略,ubound 将该参数作为 1 进行处理. 如果 VBArray 为空,ubound 方法将返回 undefined.如果 dim 大于 VBArray 的维数或为负

  • MySQL中的排序函数field()实例详解

    前言 我们在日常开发过程中,排序是经常用到的,有时候有这样的需求. 比如,需要在查询结果中根据某个字段的具体值来排序.如下面例子 上面是一张个人信息 表,假如我们想按照'seiki','iris','xut'来排序.也就是name='seiki','iris','xut'的来排序. 碰到这样的需求,我们应该怎么做呢,其实有一个MySQL函数可以非常方便的处理此需求 那就是field()函数 使用方式如下 其中,order by (str,str1,str2,str3,str4--) ,str与s

随机推荐