Manipulasi DOM yang cekap dengan DOM Maya dan Ruj

Rahsia Laman Web yang Pantas dan Responsif
Pernah terfikir mengapa tapak web kegemaran anda begitu pantas dan responsif? Semuanya berpunca daripada cara mereka mengendalikan manipulasi DOM. Model Objek Dokumen (DOM) mewakili halaman web anda sebagai pepohon berstruktur. Secara tradisinya, kami menggunakan kaedah JavaScript seperti getElementById atau removeChild untuk membuat perubahan. Tetapi apabila tapak web menjadi lebih kompleks, kaedah ini boleh melambatkan keadaan. Masukkan React, dengan DOM Maya yang mengubah permainannya.

Cabaran dengan Manipulasi DOM Tradisional
Fikirkan DOM sebagai pokok besar dengan banyak cabang. Setiap kali anda ingin menukar sesuatu, seperti mengemas kini item pertama dalam senarai sepuluh, anda akhirnya menggegarkan keseluruhan pokok. Ini boleh memperlahankan keadaan, terutamanya apabila halaman web menjadi lebih kompleks. Semakin banyak cabang (elemen) yang anda miliki, semakin sukar untuk memastikan semuanya berjalan lancar.

Penyelesaian React: DOM Maya
React menangani isu ini dengan DOM Maya, salinan ringan DOM HTML. Perubahan mula-mula digunakan pada DOM Maya, dan kemudian React mengemas kini DOM sebenar dengan cekap untuk mencerminkan perubahan ini. Proses ini, yang dikenali sebagai Rekonsiliasi, memastikan bahawa hanya bahagian DOM yang diperlukan dikemas kini, meningkatkan prestasi dengan ketara.

Cara DOM Maya Berfungsi
Apabila anda memaparkan elemen JSX dalam React, keseluruhan DOM Maya dikemas kini. Walaupun ini mungkin kedengaran tidak cekap, ia lebih pantas daripada memanipulasi DOM sebenar secara langsung. Inilah sebabnya: React mencipta salinan DOM Maya sebelum membuat sebarang kemas kini. Ia kemudian membandingkan DOM Maya yang dikemas kini dengan salinan ini menggunakan proses yang dipanggil Diffing. Perbandingan ini mengenal pasti elemen khusus yang telah berubah dan React hanya mengemas kini elemen tersebut dalam DOM sebenar.

Di Bawah Hud: Algoritma Beza React
Algoritma Beza React ialah sos rahsia di sebalik kemas kini DOM yang cekap. Algoritma ini membandingkan dua versi DOM Maya dan menggunakan set minimum perubahan yang diperlukan untuk menyegerakkannya.
Jika unsur akar dua pokok adalah daripada jenis yang berbeza, React akan membina semula keseluruhan pokok. Contohnya, menukar

kepada wasiat menyebabkan React meruntuhkan dan membina semula pokok itu dari awal.

<div>
  <Tree/>
</div>
<span>
  <Tree/>
</span>

Memandangkan unsur akar (div dan span) berbeza, React akan membina semula keseluruhan pokok.

Jenis Elemen Sama

<span id="span1" />
<span id="span2" />

Di sini, React hanya akan mengemas kini atribut id, meninggalkan elemen yang lain utuh.

Membandingkan Elemen Kanak-kanak

React juga mengoptimumkan kemas kini kepada elemen kanak-kanak. Pertimbangkan senarai ini:

<ul>
  <li>Child1</li>
  <li>Child2</li>
</ul>

<ul>
  <li>Child1</li>
  <li>Child2</li>
  <li>Child3</li>
</ul>

React melihat Child3 sebagai baharu dan dikemas kini dengan sewajarnya. Walau bagaimanapun, jika elemen baharu ditambahkan pada permulaan, React mungkin membina semula keseluruhan senarai. Di sinilah kunci masuk.
Peranan Kunci dalam Mengoptimumkan Kemas Kini

Kunci membantu React menjejaki elemen yang telah berubah, ditambah atau dialih keluar. Mereka harus unik dalam kalangan adik beradik dan stabil merentas rendering.

<ul>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

<ul>
  <li key="100">Child3</li>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

Dalam contoh ini, React mengetahui Child3 baharu dan mengemas kini senarai dengan cekap tanpa membinanya semula.

Memanipulasi DOM dengan Rujukan
Walaupun React mengoptimumkan kemas kini DOM dengan DOM Mayanya, terdapat senario di mana manipulasi langsung elemen DOM diperlukan, seperti memfokuskan input, menatal ke elemen tertentu atau mengukur dimensi elemen. React menyediakan useRef Hook untuk tujuan ini. Dengan mencipta ref dan melampirkannya pada elemen DOM melalui atribut ref, anda boleh mendapatkan akses terus ke nod DOM. UseRef Hook mengembalikan objek dengan sifat semasa, yang pada mulanya adalah batal tetapi diberikan nod DOM sebaik sahaja ia diberikan. Ini membolehkan anda memanggil kaedah DOM asli secara langsung pada elemen, meningkatkan kawalan ke atas interaksi tertentu. Sebagai contoh, anda boleh menggunakan myRef.current.scrollIntoView() untuk menatal elemen ke paparan.

Contoh: Div Menukar Warna
Mari cipta contoh yang menyeronokkan untuk melihat tindakan ini. Kami akan membuat div yang bertukar warna apabila anda mengklik butang. Kami akan menggunakan komponen berasaskan kelas dan ref untuk memanipulasi secara langsung gaya div.

<div id="root"></div>

const root = ReactDOM.createRoot(document.getElementById('root'));

class ColorChanger extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
    this.colors = ['#FFCDD2', '#C8E6C9', '#BBDEFB', '#FFF9C4', '#D1C4E9'];
    this.state = { colorIndex: 0 };
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor() {
    const nextColorIndex = (this.state.colorIndex + 1) % this.colors.length;
    this.setState({ colorIndex: nextColorIndex });
    this.divRef.current.style.backgroundColor = this.colors[nextColorIndex];
  }

  render() {
    return (
      <div className="container">
        <div
          ref={this.divRef}
          className="color-box"
          style={{
            backgroundColor: this.colors[this.state.colorIndex],
          }}
        ></div>
        <button onClick={this.changeColor}>Change Color</button>
      </div>
    );
  }
}

root.render(<ColorChanger />);

Penjelasan

Membuat Root: Akar apl React dibuat menggunakan ReactDOM.createRoot(document.getElementById('root')).
Komponen Penukar Warna:
Pembina: Memulakan ref dengan React.createRef(), menyediakan tatasusunan warna dan memulakan keadaan untuk menjejaki indeks warna.
Kaedah changeColor: Mengira indeks warna seterusnya, mengemas kini keadaan dan menukar warna latar belakang div dengan memanipulasi DOM secara langsung.
Kaedah Render: Memaparkan div dan butang, melampirkan ref pada div dan menetapkan pengendali onClick butang kepada changeColor.
Memaparkan Komponen: Komponen ColorChanger dipaparkan ke dalam elemen akar.
Kesimpulan
DOM Maya React ialah pengubah permainan untuk pembangunan web, menjadikan apl kami lebih cekap dan responsif. Dengan memanfaatkan DOM Maya, React memastikan bahawa hanya bahagian DOM yang diperlukan dikemas kini, meningkatkan prestasi. Memahami cara Algoritma dan kekunci Pembezaan React berfungsi boleh membantu anda mencipta aplikasi React yang lebih lancar dan pantas. Dan apabila anda memerlukan kawalan yang tepat, rujukan React ada untuk membantu anda berinteraksi secara langsung dengan DOM. Hayati kuasa DOM Maya dan tingkatkan kemahiran pembangunan web anda ke peringkat seterusnya!

Atas ialah kandungan terperinci Manipulasi DOM yang cekap dengan DOM Maya dan Ruj. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!