JavaScript の useRef と useState の紹介

JavaScript の useRef と useState の紹介

1. useStateフック

useState 、情報を変数内の状態として保存できる組み込みのReact hookです。関数コンポーネントにReact状態を追加できます。次の例では、 useState()状態変数を宣言し、その値は count 変数に格納されます。 setCountこの値を更新するために使用される関数です。

// ReactからuseStateをインポートする

React をインポートし、{useState} を 'react' から取得します。

関数Count() {

  //count という新しい状態変数を宣言します。const [count, setCount] = useState(0);

2. useRefフック

useRef hookは、引数またはパラメータを初期値として受け取り、参照または永続化された変更可能な値を返す組み込みのReact hookです。この参照 (略してrefには、現在のプロパティを使用して取得できる値が含まれています。

次のように、ユーザー入力を refs に保存し、収集したデータを表示することもできます。

//useRefフックをインポートする

Reactをインポートし、{useRef}を"react"から取得します。

デフォルト関数App()をエクスポートする{

  //参照を格納する変数を作成します。const nameRef = useRef();

  関数handleSubmit(e) {

    //送信時にページが再読み込みされないようにする e.preventDefault()

    // 出力名

    console.log(名前参照.現在の値)

  }

  戻る (

    <div className="コンテナ">

      <フォームonSubmit={handleSubmit}>

        <div クラス名="input_group">

          <label>名前</label>

          <input type="text" ref={nameRef}/>

        </div>

        <入力タイプ="送信"/>

      </フォーム>

    </div>

  )

}

3. useRef と useState

  • 状態とは異なり、ref または参照に格納されているデータまたは値は、コンポーネントが再レンダリングされた後でも変更されません。したがって、ref はコンポーネントのレンダリングには影響しませんが、state は影響します。
  • useState 2 つのプロパティまたは配列を返します。 1 つは値または状態であり、もう 1 つは状態を更新する関数です。対照的に、 useRef実際に保存されたデータである 1 つの値のみを返します。
  • 参照値が変更されると、更新や再レンダリングを行わずに更新されます。しかし、 useStateでは、状態またはその値を更新するためにコンポーネントを再度レンダリングする必要があります。

4. RefとStatesを使用するタイミング

refs 、ユーザー入力、 DOM要素属性を取得し、継続的に更新される値を保存する場合に役立ちます。 ただし、コンポーネントに関する情報を保存したり、コンポーネント内のメソッドを使用したりする場合は、 states最適な選択です。

まとめると、これら 2 つのhookはそれぞれ長所と短所があり、状況や目的に応じて使用されます。

JavaScriptuseRefuseStateに関するこの記事はこれで終わりです。JavaScript JavaScript useRefuseStateについてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript es6 の新しい配列メソッドの詳細な説明
  • JavaScriptとTypeScriptの関係
  • Springboot で URL の後の jsessionid を削除する方法
  • JS ブロックレベルスコープとプライベート変数の例の分析
  • JavaScriptはクロージャを使用してブロックレベルのスコープ操作をシミュレートします
  • es6ブロックレベルスコープの使用に関する詳細な理解
  • ES6 学習チュートリアル: ブロックレベル スコープの詳細な説明
  • ES6 の詳細な理解のための学習ノート: ブロックレベルのスコープバインディング
  • ES6ではletコマンドを使用してブロックレベルのスコープ例の分析をより簡単に実装します。
  • JavaScript ES 新機能ブロックスコープ

<<:  グリーンスタイルのウェブデザイン作品18点の最新コレクション

>>:  CSS グリッドレイアウトを使用してレスポンシブな縦棒グラフを作成する方法

推薦する

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

JavaScriptの知識ポイントの詳しい説明

目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...

MySQL ストアド プロシージャの権限の問題の概要

MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...

MySQLのバックアップとリカバリの簡単な分析

目次1. はじめに2. バックアップとリカバリの簡単な定義3. 復旧計画で考慮すべきいくつかの要素4...

MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

TypeScript とは何ですか?

目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...

アイデアコンパイラvueインデントエラー問題シナリオの分析

プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...

XHTML コードで Marquee タグを使用する方法

フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...