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 グリッドレイアウトを使用してレスポンシブな縦棒グラフを作成する方法

推薦する

MySQL累積計算実装方法の詳しい説明

目次序文需要分析MySQL ユーザー変数累積計算にMysqlユーザー変数を使用する要約するこの記事で...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

MySQLデータベースインデックスの詳細な紹介

目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...

JavaScriptのアロー関数の特徴と通常の関数との違い

目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

MySql における特殊演算子の使用の概要

序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...

IIS7~IIS8.5 サーバープロトコルヘッダーの削除または変更

要件: IIS 7、7.5、8.0、8.5、および ASP.NET で HTTP 応答ヘッダーを削除...

jsを使用してシンプルなカルーセル効果を実現する

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

html+css3で実装されたログインインターフェース

成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

Linux で Scala 環境を構築し、簡単な Scala プログラムを書く

Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...

MySQL5.7 mysqldump バックアップとリカバリの実装

MySQL バックアップコールドバックアップ:停止服務進行備份,即停止數據庫的寫入ホットバックアップ...

IE6 での背景画像キャッシュ

IE6 での CSS 背景画像のちらつきバグ (IE6 の背景画像キャッシュの問題) IE6 は、背...