Apa perbedaan antara `useRef` dan` createRef`?

Saya sedang membaca dokumentasi hook ketika saya menemukan useRef.

Melihat contoh mereka…

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>
    </>
  );
}

… Sepertinya useRefbisa diganti dengan 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>
    </>
  );
}

Mengapa saya membutuhkan pengait untuk ref? Mengapa useRefada?

Perbedaannya adalah createRefakan selalu membuat ref baru. Dalam komponen berbasis kelas, Anda biasanya akan meletakkan ref di properti instance selama konstruksi (misalnya this.input = createRef()). Anda tidak memiliki opsi ini di komponen fungsi. useRefmenangani pengembalian referensi yang sama setiap kali seperti pada rendering awal.

Berikut adalah contoh aplikasi yang mendemonstrasikan perbedaan perilaku kedua fungsi ini:

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);

createRefselalu mengembalikan ref baru, yang biasanya Anda simpan sebagai bidang pada instance komponen kelas. useRefmengembalikan ref yang sama pada setiap render instance komponen fungsional. Inilah yang memungkinkan status ref tetap ada di antara render, meskipun Anda tidak menyimpannya secara eksplisit di mana pun.

Dalam contoh kedua Anda, referensi akan dibuat ulang pada setiap render.

tldr

A refadalah objek JS biasa { current: <some value> }.

React.createRef()adalah pabrik yang mengembalikan wasit { current: null }- tidak melibatkan sihir .

useRef(initValue)juga mengembalikan referensi yang { current: initValue }mirip dengan React.createRef(). Selain itu, ia memoasi ref ini agar tetap ada di beberapa render dalam sebuah komponen fungsi .

this.myRef = React.createRef(); // stores ref in "mutable" this context (class)

useRef(null)pada dasarnya setara dengan useState(React.createRef())[0] ¹ .

¹ Gantikan useRefdengan useState+createRef

Berikut tweet yang telah mencerahkan bagi saya:

useRef()pada dasarnya useState({current: initialValue })[0].

Dengan wawasan dari tldrbagian tersebut, kita sekarang dapat menyimpulkan lebih lanjut:

useRef(null)pada dasarnya useState(React.createRef())[0].

Di atas kode "penyalahgunaan" useStateuntuk mempertahankan ref yang dikembalikan dari React.createRef(). [0]hanya memilih bagian nilaiuseState - [1]akan menjadi penyetel.

useStatemenyebabkan render ulang berbeda dengan useRef. Secara lebih formal, React membandingkan referensi objek lama dan baru useState, ketika nilai baru ditetapkan melalui metode penyetelnya. Jika kita mengubah status useStatesecara langsung (berlawanan dengan pemanggilan setter), perilakunya kurang lebih menjadi sama dengan useRef, karena tidak ada render ulang yang dipicu lagi:

// Example of mutaing object contained in useState directly
const [ref] = useState({ current: null })
ref.current = 42; // doesn't cause re-render

_{Catatan: Jangan lakukan ini! Gunakan useRefAPI yang dioptimalkan alih-alih menciptakan kembali roda. Di atas untuk tujuan ilustrasi.}

Hanya untuk menyoroti tujuan:

createRefsesederhana itu return {current: null}. Ini adalah cara untuk menangani ref=prop dengan cara paling modern dan hanya itu (sementara berbasis string terlalu ajaib dan berbasis panggilan balik terlihat terlalu verboose).

useRefmenyimpan beberapa data sebelum merender dan mengubahnya tidak menyebabkan render ulang (seperti useStatehalnya). Mereka jarang berhubungan. Semua yang Anda harapkan untuk komponen berbasis kelas masuk ke bidang contoh ( this.* =) terlihat seperti kandidat untuk diimplementasikan useRefdalam komponen fungsional.

Katakanlah useCallbackbekerja sebagai metode kelas terbatas ( this.handleClick = .....bind(this)) dan dapat diimplementasikan kembali (tetapi kita tidak harus menemukan kembali roda untuk yakin) dengan useRef.

Contoh lain adalah referensi DOM, ID waktu tunggu / interval, pengenal atau referensi perpustakaan pihak ketiga.

PS Saya yakin tim React lebih baik memilih penamaan yang berbeda untuk useRefmenghindari kebingungan createRef. Mungkin useAndKeepatau bahkan usePermanent.

Namun tambahan lain tapi penting untuk jawaban orang lain.

Anda tidak dapat menetapkan nilai baru untuk createRef. Tapi Anda bisa untuk useRef.

const ur = useRef();
const cr = createRef();

ur.current = 10; // you can do it, and value is set
cr.current = 10; // you can, but it's no good, it will not change it