一次點擊消耗多少資源？ React 與 Vanilla

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: margin: auto>
      <a href="#" style="{{" display: padding: fontsize: border: solid black width: textalign: margintop: onclick="{incrementClickHandler}">
        Increment {counter}
      </a>
    </div>
  );
}

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

反應計數器 UI

20 秒，只需一鍵點擊

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

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

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

？

20 秒，每秒點擊一次

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

	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: margin: auto>
      <a href="#" style="{{" display: padding: fontsize: border: solid black width: textalign: margintop: onclick="{incrementClickHandler}">
        Increment {counter}
      </a>
    </div>
  );
}

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

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

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

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

香草櫃檯使用者介面

20 秒，只需一鍵點擊

再次，我將單擊錄製圖標並讓它運行 20 秒，僅單擊按鈕一次。

看看結果：

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

20 秒，每秒點擊一次

再次，我將單擊錄製圖標並讓它再運行 20 秒，但這一次，我將每秒單擊按鈕。看結果：

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

就像在 React 範例中一樣，藍線（JS 堆）和黃線（監聽器）隨著時間的推移而增加。然而，綠線（節點）並不是恆定的；單擊按鈕時它會增加。

關於垃圾收集的幾句話

垃圾收集：垃圾收集演算法依賴的主要概念是引用的概念。

JavaScript 會自動為我們處理垃圾收集；我們不需要手動觸發它。在前面的範例中，我們看到了資源是如何消耗的，但在某些時候，JavaScript 會透過其垃圾收集器釋放其中一些資源。

結論

一次點擊或二十次點擊在資源消耗方面沒有太大差異。一旦發生點擊，JavaScript 就會分配資源，後續的點擊會繼續消耗資源。然而，這種跳躍並不像從零次點擊到一次點擊的轉變那麼顯著。

讓我們來看看兩個版本中 20 次點擊的最終值：

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

React 消耗更多資源是有道理的；這就是使用框架的成本。

一個關鍵的區別是 React 從一開始就附加所有節點，而普通版本則在點擊發生時添加節點。然而，最終，兩個版本的節點數量幾乎相同。

演示非常簡單，在這個級別上，性能方面沒有顯著差異。如前所述，使用該框架需要付出一定的代價，但考慮到它提供的所有功能和便利性，這是值得的。

以上是一次點擊消耗多少資源？ React 與 Vanilla的詳細內容。更多資訊請關注PHP中文網其他相關文章！