Jejaki berapa kali komponen diberikan menggunakan useRef() - React

Mula-mula mari kita fikirkan semua cara bagaimana seorang pemula cuba menangani perkara ini.

Untuk mengikuti bersama jika anda mahu, buat projek reaksi baharu dan letakkan kod sebanyak ini dalam App.jsx anda atau mana-mana komponen pilihan anda dan juga alih keluar semuanya daripada index.css dan App.css:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

Ia akan dipratonton seperti ini sekarang:

Dalam kod di atas, saya telah mencipta pembolehubah keadaan bernama kiraan yang meningkat sebanyak 1 apabila mengklik butang. Kiraan di sini ialah pembolehubah keadaan tambahan yang tidak melakukan apa-apa di sini tetapi ia akan membantu anda memahami perkara dengan lebih baik. Kod ini tidak sepatutnya membebankan anda jika anda pernah mengekod dalam React.

Jadi, mari kita ke bahagian utama...

1. Menggunakan Pembolehubah Keadaan

Ini adalah pendekatan pertama yang terlintas di fikiran kebanyakan kita seperti mencipta pembolehubah keadaan yang memulakannya dengan 0 dan menambahnya sebanyak 1 setiap kali komponen dipaparkan.

Komponen Apl anda akan kelihatan seperti ini:

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

Pendekatan ini akan berfungsi dengan baik di sini tetapi ia mempunyai banyak kelemahan. Idealnya, komponen ini tidak dipaparkan sekali sahaja apabila kami mengklik butang Force Render. Apabila kita mengklik butang, nilai kiraan bertambah sebanyak 1 yang menyebabkan komponen itu dipaparkan semula kerana kita semua tahu perubahan dalam mana-mana pembolehubah keadaan menyebabkan komponen dipaparkan semula. Tetapi ia berakhir di sini selepas pemaparan semula oleh setCount(kiraan 1), setNumberOfTimesRendered(numberOfTimesRendered 1) akan dicetuskan dan menyebabkan komponen dipaparkan semula.

Nilai numberOfTimesRendered meningkat sebanyak 1 tetapi setiap kali kami mengklik butang Force Render komponen tersebut dipaparkan dua kali yang menunjukkan mengapa menggunakan pembolehubah keadaan untuk perkara seperti ini bukanlah pendekatan yang terbaik tetapi paling teruk di sini.

2. Menggunakan Pembolehubah Global

Satu lagi pendekatan yang boleh difikirkan ialah mentakrifkan pembolehubah global di luar kitaran hayat komponen dan menambahnya sebanyak 1 apabila komponen dipaparkan semula, seperti ini:

let numberOfTimesRendered = 0;

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

Pendekatan ini akan berfungsi dengan baik dan ia tidak menyebabkan sebarang pemaparan tambahan dan ini nampaknya merupakan penyelesaian terbaik untuk ini tetapi bukan kerana anda tidak sepatutnya menentukan apa-apa di luar kitaran hayat komponen.

3. Menggunakan Pembolehubah Tempatan

Seseorang juga boleh memikirkan pendekatan yang sama seperti di atas tetapi dengan pembolehubah tempatan di dalam komponen tetapi izinkan saya memberitahu anda, tidak ada pendekatan yang paling teruk daripada ini kerana setiap kali komponen menyebabkan pembolehubah tempatan akan dimulakan semula kepada 0 dan kami akan kehilangan jejak render sebelumnya setiap kali.

4. Menggunakan cangkuk useRef().

Sekarang mari kita laksanakan ini menggunakan useRef().

Seperti kebanyakan kita tahu useRef ialah cangkuk untuk merujuk elemen di dalam dom dan memanipulasinya secara manual tetapi useRef bukan hanya terhad kepada ini. Ia juga boleh menyimpan nilai dan ia boleh digunakan untuk memastikan pembolehubah berterusan merentas kitaran hayat pemaparan komponen.

Jika anda menyimpan nilai di dalam useRef, ia tidak akan terjejas oleh kitaran hayat pemaparan komponen React, nilai itu akan kekal berterusan merentas sebarang jumlah pemaparan semula. Pelaksanaannya akan kelihatan seperti ini:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current memberikan nilai semasa yang disimpan di dalam pembolehubah rujukan. Pendekatan ini tidak menyebabkan sebarang pemaparan semula tambahan tidak mengatakan ia adalah yang terbaik tetapi salah satu pendekatan yang paling optimum sepanjang pengetahuan saya.

---

Itu menyimpulkan artikel ini. Terbuka untuk maklum balas dan jika anda memerlukan penjelasan lanjut, sila komen di bawah, dan saya akan melakukan yang terbaik untuk membantu anda.

Hubungi saya di X & LinkedIn!?✨

Atas ialah kandungan terperinci Jejaki berapa kali komponen diberikan menggunakan useRef() - React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!