一次點擊消耗多少資源？ React 與 Vanilla-js教程-PHP中文網

React 與其他 JavaScript 框架一樣，在幕後處理許多我們經常沒有想到的事情。

沒關係－我們身為開發人員的工作就是解決問題，實現越簡單越好。您並不總是需要了解框架為您做什麼的每個細節。

JavaScript 是一門有趣的語言；它是瀏覽器之王，而且瀏覽器仍然被大量使用，所以我認為它不會很快消失。

事實上，許多本機應用程式（iOS、Android、智慧電視）都使用本機和 Web 技術運行混合解決方案。

在這篇文章中，我想測試 React 中的一個簡單計數器及其 Vanilla JavaScript 版本。

使用 Chrome DevTools 衡量效能

首先，讓我們來談談 Chrome 提供的一個有用的選項卡，稱為「效能」。此標籤包含用於測量 Web 應用程式效能的記錄功能。

在這篇文章中，我將重點放在三個關鍵指標：JS 堆、節點和監聽器。

JS 堆：堆是 JavaScript 中儲存物件、陣列和函數的記憶體區域。與保存原始值（數字、字串、布林值）和函數呼叫的堆疊不同，堆管理動態記憶體分配。

DOM 節點：DOM 節點是網頁 HTML 中的單一元素、屬性或文本，以文件物件模型 (DOM) 表示。

事件監聽器：在 JavaScript 中，事件監聽器是等待 HTML 元素上的特定事件（例如點擊、按鍵、滑鼠移動）的函數。當事件發生時，偵聽器會觸發，並執行回應代碼。

示範：建立基本的 React 計數器

好吧，UI 是個簡單的計數器。 UI 只是一個有點擊處理程序的按鈕。每次單擊按鈕時，計數器都會增加。

反應示範

React 程式碼如下圖所示：

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

登入後複製

程式碼非常不言自明。需要注意的一件事是，該演示運行在 Next.js 之上，這就是我們需要「使用客戶端」的原因。除此之外，它只是一個基本的 React 元件。

反應計數器 UI

How Many Resources Does a Click Consume? React vs. Vanilla

20 秒，只需一鍵點擊

現在，我將在 Chrome 中開啟「效能」選項卡，點擊「錄製」圖標，並讓它運行 20 秒，同時僅單擊該按鈕一次。 20 秒結束時，效能結果如下圖所示：

How Many Resources Does a Click Consume? React vs. Vanilla

看看如何只需單擊一下即可將數字提高到：

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

？

20 秒，每秒點擊一次

現在，我要讓它再運行 20 秒，但這次我將每秒單擊按鈕。我們來看看結果：

How Many Resources Does a Click Consume? React vs. Vanilla

	React
JS Heap	4MB
Nodes	46
Listeners	331

關於 React 需要注意的兩件事：

a) 當狀態變數更新時，元件會重新渲染，這表示在本例中，元件被渲染了 20 次。

b) 感謝虛擬 DOM，React 只更新需要更新的節點。

現在，讓我們回到圖表，看看藍線（JS 堆）和黃線（監聽器）如何遞增，而綠線（節點）保持不變。

也值得一提的是，與一鍵運行相比，數字並沒有太大變化。

示範：建立一個普通的 JavaScript 計數器

現在，我們擁有相同的 UI，但這次它是使用普通 HTML 和 JavaScript 建立的，不涉及任何框架。

香草演示。

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

登入後複製

需要提到的是以下元素的必要性：

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

登入後複製

使用 JavaScript 操作以更新其內容：