Berapa Banyak Sumber yang Digunakan oleh Klik? React vs. Vanila

React, seperti mana-mana rangka kerja JavaScript yang lain, mengendalikan banyak perkara di sebalik tabir yang sering kita tidak fikirkan.

Dan tidak mengapa—tugas kami sebagai pembangun ialah menyelesaikan masalah, dan lebih mudah pelaksanaannya, lebih baik. Anda tidak semestinya perlu memahami setiap butiran tentang fungsi rangka kerja untuk anda.

JavaScript ialah bahasa yang menarik; ia adalah raja penyemak imbas, dan penyemak imbas masih banyak digunakan, jadi saya tidak nampak ia hilang dalam masa terdekat.

Malah, banyak apl asli (iOS, Android, TV Pintar) menjalankan penyelesaian hibrid menggunakan kedua-dua teknologi asli dan web.

Dalam siaran ini, saya ingin menguji kaunter ringkas dalam React berbanding versi JavaScript Vanilanya.

Mengukur Prestasi dengan Chrome DevTools

Mula-mula, mari kita bincangkan tentang tab berguna yang Chrome tawarkan yang dipanggil Prestasi. Tab ini termasuk ciri rakaman yang mengukur prestasi aplikasi web.

Dalam siaran ini, saya akan menumpukan pada tiga metrik utama: JS Heap, Nod dan Listeners.

JS Heap: Heap ialah kawasan memori dalam JavaScript tempat objek, tatasusunan dan fungsi disimpan. Tidak seperti timbunan, yang memegang nilai primitif (nombor, rentetan, boolean) dan panggilan fungsi, timbunan mengurus peruntukan memori dinamik.

Nod DOM: Nod DOM ialah elemen individu, atribut atau teks dalam HTML halaman web, yang diwakili dalam Model Objek Dokumen (DOM).

Pendengar Acara: Dalam JavaScript, pendengar acara ialah fungsi yang menunggu acara tertentu (cth., klik, penekanan kekunci, pergerakan tetikus) pada elemen HTML. Apabila peristiwa itu berlaku, pendengar mencetus, melaksanakan kod sebagai tindak balas.

Demo: Membina Kaunter Reaksi Asas

Baiklah, UI ialah kaunter yang mudah. UI hanyalah butang dengan pengendali klik. Setiap kali butang diklik, pembilang bertambah.

• Demo React

Kod React kelihatan seperti ini:

"use client";

import { useState } from "react";

export default function Page() {
  const [counter, setCounter] = useState(0);

  const incrementClickHandler = (event: { preventDefault: () => void }) => {
    event.preventDefault();

    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div style={{ maxWidth: 800, margin: "0 auto" }}>
      <a
        href="#"
        style={{
          display: "inline-block",
          padding: "20px 40px",
          fontSize: 28,
          border: "1px solid black",
          width: "100%",
          textAlign: "center",
          marginTop: 40,
        }}
        onClick={incrementClickHandler}
      >
        Increment {counter}
      </a>
    </div>
  );
}

Kod ini cukup jelas. Satu perkara yang perlu diambil perhatian ialah demo berjalan di atas Next.js, itulah sebabnya kami memerlukan "menggunakan klien". Selain daripada itu, ia hanyalah komponen React asas.

UI Kaunter Bertindak balas

20 Saat dan Hanya Satu Klik

Sekarang, saya akan membuka tab Prestasi dalam Chrome, klik ikon rekod dan biarkan ia berjalan selama 20 saat sambil mengklik butang sekali sahaja. Pada penghujung 20 saat, hasil prestasi kelihatan seperti ini:

Lihat cara hanya satu klik melonjakkan nombor kepada:

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

?

20 Saat dengan Klik sesaat

Sekarang, saya akan membiarkannya berjalan selama 20 saat lagi, tetapi kali ini saya akan mengklik butang itu sekali sesaat. Mari lihat hasilnya:

	React
JS Heap	4MB
Nodes	46
Listeners	331

Dua perkara yang perlu diberi perhatian tentang React:

a) Apabila pembolehubah keadaan dikemas kini, komponen itu dipaparkan semula, bermakna dalam kes ini, komponen tersebut telah dipaparkan sebanyak 20 kali.

b) Terima kasih kepada DOM maya, React hanya mengemas kini nod yang perlu dikemas kini.

Sekarang, mari kita kembali ke carta dan lihat bagaimana garis biru (JS Heap) dan garis kuning (Pendengar) meningkat, manakala garis hijau (Nod) kekal malar.

Perlu juga dinyatakan bahawa nombor tidak banyak berubah berbanding dengan larian satu klik.

Demo: Membina Kaunter JavaScript Vanila

Kini, kami mempunyai UI yang sama, tetapi kali ini ia dibina dengan HTML vanila dan JavaScript—tiada rangka kerja yang terlibat.

• Demo Vanila.

"use client";

import { useState } from "react";

export default function Page() {
  const [counter, setCounter] = useState(0);

  const incrementClickHandler = (event: { preventDefault: () => void }) => {
    event.preventDefault();

    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div style={{ maxWidth: 800, margin: "0 auto" }}>
      <a
        href="#"
        style={{
          display: "inline-block",
          padding: "20px 40px",
          fontSize: 28,
          border: "1px solid black",
          width: "100%",
          textAlign: "center",
          marginTop: 40,
        }}
        onClick={incrementClickHandler}
      >
        Increment {counter}
      </a>
    </div>
  );
}

Satu perkara yang perlu dinyatakan ialah keperluan elemen berikut:

<html>
  <head>
    <script>
      let increment = 0;

      window.onload = function () {
        document.querySelector("#counter").innerText = increment;

        document.querySelector("a").addEventListener("click", function (event) {
          event.preventDefault();
          increment++;
          document.querySelector("#counter").innerText = increment;
        });
      };
    </script>
  </head>
  <body style="max-width: 800; margin: 0 auto; font-family: monospace;">
    <a
      href="#"
      style="
        display: inline-block;
        padding: 20px 40px;
        font-size: 28px;
        border: 1px solid black;
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: black;
        margin-top: 40;
        box-sizing: border-box;
      "
      >Increment <span id="counter"></span>
    </a>
  </body>
</html>

yang dimanipulasi dengan JavaScript untuk mengemas kini kandungannya:

<span id="counter"></span>

UI Kaunter Vanila

20 Saat dan Hanya Satu Klik

Sekali lagi, saya akan mengklik ikon rekod dan biarkan ia berjalan selama 20 saat, mengklik butang sekali sahaja.

Lihat hasilnya:

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

20 Saat dengan Klik sesaat

Sekali lagi, saya akan mengklik ikon rekod dan biarkan ia berjalan selama 20 saat lagi, tetapi kali ini, saya akan mengklik butang itu sekali sesaat. Lihat hasilnya:

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

Sama seperti dalam contoh React, garis biru (JS Heap) dan garis kuning (Pendengar) meningkat dari semasa ke semasa. Walau bagaimanapun, garis hijau (Nod) tidak tetap; ia bertambah apabila butang diklik.

Sedikit Perkataan tentang Kutipan Sampah

Kutipan Sampah: Konsep utama yang menjadi sandaran algoritma kutipan sampah ialah konsep rujukan.

JavaScript mengendalikan kutipan sampah secara automatik untuk kami; kita tidak perlu mencetuskannya secara manual. Dalam contoh sebelum ini, kami melihat cara sumber digunakan, tetapi pada satu ketika, JavaScript menguruskan mengeluarkan beberapa sumber tersebut melalui pengumpul sampahnya.

Kesimpulan

Satu klik atau dua puluh klik tidak begitu berbeza dari segi penggunaan sumber. Sebaik sahaja klik berlaku, JavaScript memperuntukkan sumber dan klik seterusnya terus menggunakan sumber. Walau bagaimanapun, lonjakan itu tidak begitu ketara seperti peralihan daripada sifar kepada satu klik.

Mari kita lihat nilai akhir untuk 20 klik dalam kedua-dua versi:

	Vanilla	React
JS Heap	2.3MB	4.0MB
Nodes	42	46
Listeners	77	331

Memang masuk akal bahawa React menggunakan lebih banyak sumber; itulah kos menggunakan rangka kerja.

Satu perbezaan utama ialah React melampirkan semua nod dari awal, manakala versi vanila menambah nod apabila klik berlaku. Walau bagaimanapun, pada akhirnya, kedua-dua versi berakhir dengan bilangan nod yang hampir sama.

Demo ini agak mudah, dan pada tahap ini, tiada perbezaan yang ketara dari segi prestasi. Seperti yang dinyatakan sebelum ini, terdapat harga yang perlu dibayar untuk menggunakan rangka kerja, tetapi ia berbaloi dengan mengambil kira semua ciri dan kemudahan yang disediakannya.

Atas ialah kandungan terperinci Berapa Banyak Sumber yang Digunakan oleh Klik? React vs. Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!