快捷導(dǎo)航

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

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

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

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

一、setInterval函數(shù)

(1) 定義

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

(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;

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

您可能感興趣的文章:

相關(guān)文章

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