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はそれぞれ長所と短所があり、状況や目的に応じて使用されます。

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

以下もご興味があるかもしれません: