0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React userefの用途について

Last updated at Posted at 2023-02-10

React userefの用途を、具体的に書いて下さい。

React userefは、Reactコンポーネント内に複数の参照を保持するために使用されます。 例えば、コンポーネント内にフォームを持つ場合、userefを使用してフォーム要素への参照を保持することができます。 また、userefを使用すると、コンポーネント内で定義されている定数や関数への参照を保持することもできます。

参照を保持するとは、具体的にどういうことですか? 分かり易く説明してください。

参照を保持するとは、コンポーネント内で定義されている定数や関数などをプログラム内で一度だけ参照するために、参照を一時的に保存しておくことです。 これにより、ある処理を繰り返し実行したり、ある処理の中で参照を取得して処理を行ったりすることができます。

参照とはポインタのことですか? ID番号ですか? 中身は何ですか?

参照とは、プログラム内のオブジェクトへの参照を指します。 具体的な内容としては、オブジェクトのID番号、またはオブジェクトのメモリ上のアドレスなどです。 中身は、オブジェクトのプロパティやメソッドなどです。

事例のコードを書いて下さい。

React.useRef(null);

const myRef = React.useRef(null);

// フォーム要素への参照を保持
const handleSubmit = () => {
  const formElement = myRef.current;
  // フォームのデータを取得し処理を行う
  const formData = new FormData(formElement);
  // 以降、フォームデータを扱う処理を行う
};

return (
  <form ref={myRef} onSubmit={handleSubmit}>
    ...
  </form>
);

動作を説明してください

上記のコードでは、ReactのuseRefを使用してフォーム要素への参照を保持し、フォーム要素を参照してフォームデータを取得しています。 フォームのsubmitイベントが発火すると、handleSubmit関数が実行され、myRefで保持している参照を使用してフォーム要素を取得します。 取得したフォーム要素を使用して、FormDataオブジェクトを作成してフォームデータを取得し、以降の処理を行います。

currentとは、何ですか?

currentとは、ReactのuseRef関数で参照オブジェクトを取得するためのプロパティです。 currentプロパティは、参照オブジェクトの内容(値)を取得するために使用します。

他にuserefのプロパティはありますか?

ReactのuseRef関数では、currentプロパティ以外にも、その他のプロパティがあります。 例えば、callbackプロパティを使用すると、参照オブジェクトの内容が変更されたときにコールバック関数を実行できます。 また、dependenciesプロパティを使用すると、参照オブジェクトの内容が変更されるときに、依存関係を確認できます。

<form ref という書き方は、他のHTML、コンポーネント要素でも、共通ですか? refって、W3Cに規定されているのですか?

 という書き方は、他のHTML要素やコンポーネント要素では利用できません。 refはReact独自の機能であり、W3Cでは規定されていません。

userefとusestateの違いは何ですか?

useRefとuseStateの違いは、参照を保持するか状態を保持するかです。 useRefは、参照を保持するための特別な関数であり、useStateは、コンポーネントの状態を保持するための特別な関数です。 また、useRefは、参照を保持するためだけに使用するのに対し、useStateは、コンポーネントの状態を更新するためにも使用する必要があります。

参照と状態の違いを、コンピュータ知識のない小学生や高齢者にもわかるように教えてください。

参照と状態の違いを説明するには、家族間での会話を例にして説明することができます。 例えば、お母さんが友達家に会いに行くときに、お母さんの住所を友達家に伝えるときです。 このとき、友達家にはお母さんの住所を伝えるだけでなく、お母さんの住所を参照するための住所の番号なども伝える必要があります。 この住所の番号が参照です。 一方、お母さんの住所は、お母さんの住所が変わるときにも、お母さんの住所を友達家に伝える必要があります。 この時、お母さんの住所が変わることを状態と呼びます。

タラちゃんと、サザエさんで説明してください

サザエさんがタラちゃんに住所を教えようとした時、サザエさんはタラちゃんに住所を伝えるだけでなく、住所を参照するための番号も伝える必要があります。 この番号が参照です。 一方、サザエさんの住所が変わった場合は、タラちゃんにサザエさんの新しい住所を伝える必要があります。 これが状態です。

住所を参照するための番号とは、つまり郵便番号ですか? 住民登記票の登録コードですか?

住所を参照するための番号とは、郵便番号や住民登記票の登録コードなどです。 ただし、参照として使用する番号は、上記のもの以外にも様々な形式があります。

どんなものが、他にあるというのですか?具体的に説明してください。

参照として使用する番号としては、IPアドレス、メールアドレス、URLなどがあります。 IPアドレスは、コンピュータなどのネットワーク上のデバイスを識別するための番号です。 メールアドレスは、メールを受信するためのアドレスです。 URLは、特定のウェブページを指定するものです。

サザエさんの住所が変わった場合とは、住所の地名が変わることを指しますか(つまり郵便番号が同じだが、地名が変更された場合。市が町になったとかですか)。もしくはサザエさんが引っ越しをしたという事ですか?(つまり引っ越ししたから、郵便番号自体がそもそも変わってしまった)

サザエさんの住所が変わった場合とは、サザエさんが引っ越しをした場合を指します。 つまり、サザエさんが引っ越しをしたことにより、郵便番号自体が変わってしまったという意味です。

何となくわかりました。

では、サザエさんからタラちゃんに状態を伝えるためには、何を伝えれば良いですか?

サザエさんからタラちゃんに状態を伝えるためには、サザエさんの新しい住所を伝える必要があります。 また、サザエさんが住所を変更した日時も伝える必要があります。

複雑すぎて、負担になります。

その悩みを解決するために、ReactのuseRef関数を使用すると便利です。 ReactのuseRef関数を使用すると、サザエさんの住所を参照するための番号を取得し、サザエさんの住所が変更された時には、サザエさんの新しい住所を取得することができます。 これにより、サザエさんの住所が変更されたかどうかをタラちゃんに伝える必要がなくなります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?