React で setInterval 関数を使用する例

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています。Windows 10


1. setInterval関数

(1)定義

setInterval() メソッドは、指定された期間 (ミリ秒単位) で関数を呼び出したり、式を評価したりします。
setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じられるまで、関数を繰り返し呼び出します。 setInterval() によって返される ID 値は、clearInterval() メソッドのパラメーターとして使用できます。

(2)例

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'antd' から { Radio, Button, Icon } をインポートします。

クラスListはComponentを拡張します{
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      オンライン: 偽、
    };
  };

  ハンドルログイン=()=>{
    localStorage.setItem('ユーザー名','xuzheng');
  };

  ハンドルログアウト=()=>{
    localStorage.removeItem('ユーザー名');
  };

  コンポーネントマウント(){
    this.timer = setInterval(() => {
      this.setState({
        オンライン: localStorage.username ? true : false,
      })
    }, 1000);
  }

  コンポーネントのマウントを解除します(){
    if (this.timer != null) {
      タイマー間隔をクリアします。
    }
  }

  与える() {
    戻る (
      <div>
        <div>
          <アイコン タイプ='ユーザー' スタイル={{marginRight:'8px'}}/>
          <span>{localStorage.username ? localStorage.username : 'ログインしていません'}</span>
        </div>
        <div スタイル={{marginTop:'20px'}}>
          <Button type='primary' onClick={this.handleLogin}>ログイン</Button>
        </div>
        <div スタイル={{marginTop:'20px'}}>
          <Button type='primary' onClick={this.handleLogout}>ログアウト</Button>
        </div>
      </div>
    )
  }
}

デフォルトリストをエクスポートします。

React での setInterval 関数の使用に関するこの記事はこれで終わりです。React での setInterval 関数の使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactエラー境界コンポーネント処理
  • react setStateの詳細な説明
  • 簡潔なReactコンポーネントを書くためのヒント
  • Reactはラジオコンポーネントのサンプルコードを実装します
  • Andrew Ng の機械学習演習: SVM サポートベクターマシン

<<:  Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

>>:  Linux で iostat コマンドを使用するチュートリアル

推薦する

カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...

nginx を使用して http を https に変換するサンプルコード

最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...

MySQL 8.0.23 メジャーアップデート (新機能)

著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...

MySQLの認証コマンドgrantの使い方

この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

MySQL 8.0 redo ログの詳細な分析

目次序文REDOログの生成REDOログ送信REDOログの保存と通知ユーザースレッドに通知要約する序文...

CentOS 7.x dockerはoverlay2ストレージ方式を使用する

/etc/docker/daemon.json を編集し、以下を追加します。 { "ストレ...

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

SQL 文を使用してデータを収集する場合の sum 関数と count 関数の if 判定条件の使用法の説明

まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...

検証コード干渉を実装する js (静的)

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

vue シンプルメモ帳開発の詳しい説明

この記事では、参考までにEasy Notepadを実装するためのVueの具体的なコードを紹介します。...

Linux でテキストから改行文字を削除する方法

復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

MySQLのint主キーの自己増分の問題を解決する

導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...