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 コマンドを使用するチュートリアル

推薦する

MySQL ディープページング問題の解決の実践記録

目次序文ディープページングを制限すると遅くなるのはなぜですか?サブクエリによる最適化B+ツリー構造の...

Linux (Ubuntu 18.04) に vim エディタをインストールする方法

デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...

React dva実装コード

目次ドヴァdvaの使用DVAの実装非同期をサポートルーターの実装成し遂げる:ドヴァdva は、red...

CocosCreator 学習モジュールスクリプト

Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...

SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...

Ubuntu ブート自動起動サービス設定

Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...

MySQL 5.7.23 バージョンのインストールチュートリアルと設定方法

MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...

ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

Vueのドラッグスクリーンショット機能を実装する簡単な方法

マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...