☰

`useRef` と `createRef` の違いは何ですか? 質問する

tag-icon • tag-icon javascript reactjs react-hooks
`useRef` と `createRef` の違いは何ですか? 質問する

フックのドキュメントを読んでいたら、useRef。

彼らの例を見ると…

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef…は に置き換えることができるようですcreateRef。

function TextInputWithFocusButton() {
  const inputRef = createRef(); // what's the diff?
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

refs にフックが必要なのはなぜですか? なぜuseRef存在するのですか?

ベストアンサー1

違いは、 がcreateRef常に新しい ref を作成することです。クラスベースのコンポーネントでは、通常、構築時にインスタンス プロパティに ref を配置します (例this.input = createRef())。関数コンポーネントではこのオプションはありません。useRefは、最初のレンダリング時と同じ ref を毎回返します。

これら 2 つの関数の動作の違いを示すサンプル アプリを次に示します。

import React, { useRef, createRef, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

編集 1rvwnj71x3

おすすめ記事