快捷導(dǎo)航

React中使用setInterval函數(shù)的實(shí)例

更新時(shí)間：2021年04月06日 11:38:57 作者：哈工大的許政

這篇文章主要介紹了React中使用setInterval函數(shù)的實(shí)例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

本文是基于Windows 10系統(tǒng)環(huán)境，學(xué)習(xí)和使用React：Windows 10

一、setInterval函數(shù)

(1) 定義

setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

(2) 實(shí)例

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;

到此這篇關(guān)于React中使用setInterval函數(shù)的實(shí)例的文章就介紹到這了,更多相關(guān)React中使用setInterval函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

你知道怎么在 HTML 頁(yè)面中使用 React嗎
這篇文章主要為大家詳細(xì)介紹了如何在HTML頁(yè)面中使用 React，使用使用js模塊化的方式開(kāi)發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
React-Route6實(shí)現(xiàn)keep-alive效果
本文主要介紹了React-Route6實(shí)現(xiàn)keep-alive效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧<BR>
2022-06-06
Remix中mdx?table不支持表格解決
這篇文章主要為大家介紹了Remix中mdx?table不支持表格問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：E
這篇文章主要為大家介紹了Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：ESOCKETTIMEOUT”問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
詳解react服務(wù)端渲染（同構(gòu)）的方法
這篇文章主要介紹了詳解react服務(wù)端渲染（同構(gòu)）的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法
本文主要介紹了React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
React + Node.js實(shí)現(xiàn)圖片上傳功能
最近筆者在開(kāi)發(fā)個(gè)人博客的后臺(tái)管理系統(tǒng),里面用到了圖片上傳相關(guān)的功能,在這里記錄并分享一下,希望可以幫到大家,話不多說(shuō)直接開(kāi)始吧,感興趣的朋友可以參考下
2024-01-01
React封裝CustomSelect組件思路詳解
小編需要封裝一個(gè)通過(guò)Popover彈出框里可以自定義渲染內(nèi)容的組件，渲染內(nèi)容暫時(shí)有: 單選框, 復(fù)選框，接下來(lái)通過(guò)本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下
2022-07-07
React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
react diff算法源碼解析
這篇文章主要介紹了react diff算法源碼解析的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下
2021-04-04