Kuasai Manipulasi dan Prestasi DOM dengan React useRef Hook

Memahami React useRef Hook: From Zero to Hero

pengenalan

Apabila membina aplikasi dengan React, satu cabaran utama yang dihadapi pembangun ialah mengurus keadaan dan prestasi komponen. Cangkuk useState React digunakan secara meluas untuk pengurusan keadaan, tetapi kadangkala boleh menyebabkan pemaparan semula yang tidak perlu. Di sinilah cangkuk useRef menjadi tidak ternilai. Ia membolehkan kami berinteraksi dengan DOM secara langsung, menjejaki perubahan dan menyimpan nilai tanpa mencetuskan pemaparan semula komponen.

Dalam panduan ini, kami akan meneroka cangkuk useRef langkah demi langkah, merangkumi tujuan, faedah dan kes penggunaan biasa. Pada akhirnya, seorang pemula pun akan dapat melaksanakan useRef dengan yakin untuk menyelesaikan pelbagai cabaran dalam aplikasi React mereka.

Apakah React useRef Hook?

Kait useRef ialah sebahagian daripada API cangkuk teras React. Ia mengembalikan objek boleh ubah dengan sifat .current, yang boleh digunakan untuk menyimpan sebarang nilai yang anda inginkan. Tidak seperti keadaan, menukar nilai .current tidak menyebabkan komponen dipaparkan semula.

Berikut ialah sintaks mudah untuk useRef:

const myRef = useRef(initialValue);

• initialValue: Nilai awal objek useRef.
• myRef.current: Sifat yang menyimpan nilai rujukan.

Mengapa Menggunakan useRef?

• Elakkan pemaparan semula yang tidak perlu: Perubahan keadaan mencetuskan pemaparan semula dalam React, tetapi menggunakan useRef membolehkan anda mengekalkan nilai antara pemaparan tanpa menyebabkan kemas kini.
• Akses elemen DOM: Selalunya, kita perlu berinteraksi dengan elemen DOM asli, seperti memfokuskan medan input. useRef menyediakan cara yang cekap untuk melakukannya.
• Jejak perubahan keadaan: Anda boleh menjejak nilai seperti keadaan sebelumnya atau memaparkan kiraan yang berterusan merentas pemaparan.

Masalah: Keadaan Reaksi Menyebabkan Paparan Semula Tidak Perlu

Dalam React, perubahan keadaan mencetuskan pemaparan semula. Untuk aplikasi kritikal prestasi, pemaparan semula yang berlebihan boleh melambatkan apl. Mari kita ambil contoh.

Contoh Masalah: Nyatakan Menyebabkan Paparan Semula

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dalam contoh ini, mengklik butang akan menyebabkan keseluruhan komponen dipaparkan semula, walaupun anda mungkin hanya mengambil berat tentang mengemas kini data tertentu seperti kiraan.

Penyelesaian: Gunakan useRef untuk Mencegah paparan semula

Dengan useRef, kami boleh menyimpan nilai tanpa menyebabkan pemaparan semula yang tidak perlu.

Ruj Contoh untuk Menyelesaikan Masalah

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dalam contoh ini, kami menambah countRef.current tanpa mencetuskan pemaparan semula, kerana React tidak memaparkan semula apabila useRef berubah.

Mengakses Elemen DOM Menggunakan useRef

Sifat deklaratif React menghilangkan manipulasi DOM langsung. Tetapi ada kalanya kita perlu mengakses elemen DOM secara langsung, seperti memfokuskan medan input atau menatal ke bahagian tertentu. Di sinilah useRef datang untuk menyelamatkan.

Contoh: Memfokuskan Medan Input

const myRef = useRef(initialValue);

Dalam contoh ini, kami menetapkan inputRef kepada atribut ref bagi medan input. Fungsi handleFocus dipanggil apabila butang diklik, membolehkan kami memfokuskan medan input secara pemrograman menggunakan inputRef.current.focus().

Menjejaki Perubahan Keadaan Tanpa Penyampaian Semula

Kadangkala, anda perlu menjejak nilai dari semasa ke semasa tanpa mencetuskan pemaparan semula. Kes penggunaan biasa ialah untuk menjejak keadaan pembolehubah sebelumnya.

Contoh: Menjejaki Keadaan Sebelumnya dengan useRef

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dalam contoh ini, kami menggunakan useRef untuk menyimpan nilai sebelumnya. Komponen dipaparkan dengan nilai semasa, tetapi nilai sebelumnya disimpan dalam prevValueRef.current dan tidak mencetuskan pemaparan semula.

Adakah useRef Menyebabkan Re-render?

Tidak, mengubah suai objek useRef tidak menyebabkan pemaparan semula. Tingkah laku ini menjadikan useRef sempurna untuk menyimpan nilai yang anda perlu kekalkan merentas pemaparan tetapi tidak mahu digunakan sebagai sebahagian daripada logik pemaparan.

Contoh: Tiada pemaparan semula pada useRef Change

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dalam contoh ini, walaupun kami menukar renderCountRef.current pada setiap pemaparan semula, ia tidak menyebabkan sebarang pemaparan semula tambahan.

Contoh Lanjutan: useRef untuk Menjejaki Peristiwa Klik

Mari bina contoh yang lebih maju di mana kita mengira bilangan kali butang diklik tanpa menyebabkan pemaparan semula.

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

Dalam kes ini, kiraan klik butang dijejaki melalui clickCountRef.current, tetapi React tidak memaparkan semula komponen tersebut.

Kesilapan Biasa dengan useRef

Terlupa untuk Memulakan Ruj

Sentiasa ingat untuk memulakan ref anda dengan nilai atau nol.

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

Menggunakan useRef untuk Menyimpan Keadaan Komponen

Jangan gunakan useRef sebagai pengganti useState. useRef hanya boleh digunakan untuk nilai yang tidak menjejaskan pemaparan. Jika nilai mempengaruhi paparan komponen, gunakan useState.

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

Soalan Lazim (Soalan Lazim)

1. Bilakah Saya Harus Menggunakan useRef Daripada useState?

Gunakan useRef apabila anda perlu menyimpan nilai boleh ubah tanpa mencetuskan pemaparan semula. Untuk nilai yang mempengaruhi UI, gunakan useState.

2. Bolehkah saya Menggunakan useRef untuk Menyimpan Keadaan Sebelumnya?

Ya, anda boleh menggunakan useRef untuk menyimpan nilai sebelumnya tanpa mencetuskan pemaparan semula, tetapi ingat untuk mengemas kini rujukan dalam useEffect.

3. Adakah Mengubah suai useRef Menyebabkan Re-render?

Tidak, mengubah suai useRef.current tidak menyebabkan pemaparan semula. Itulah sebabnya ia sesuai untuk senario yang anda mahu mengelakkan kemas kini yang tidak perlu.

4. Bagaimanakah Saya Mengakses Elemen DOM dengan useRef?

Tetapkan useRef kepada atribut ref elemen DOM, kemudian anda boleh mengakses elemen DOM melalui ref.current.

Kesimpulan

Kait useRef ialah alat serba boleh dan berkuasa dalam React yang membolehkan pembangun menyimpan nilai, menjejaki keadaan sebelumnya dan berinteraksi dengan elemen DOM tanpa menyebabkan pemaparan semula. Daripada mengurus kiraan klik kepada memfokuskan input, useRef membuka peluang untuk mengoptimumkan prestasi dan menyediakan penyelesaian yang lebih bersih dan cekap. Dengan panduan ini, anda kini mempunyai pengetahuan untuk melaksanakan useRef dalam pelbagai senario, daripada kes penggunaan peringkat pemula kepada aplikasi yang lebih maju.

Atas ialah kandungan terperinci Kuasai Manipulasi dan Prestasi DOM dengan React useRef Hook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!