一次点击消耗多少资源？ 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 进行操作以更新其内容：