クリックごとにどれくらいのリソースが消費されますか?リアクト対バニラ-jsチュートリアル-php.cn

クリックごとにどれくらいのリソースが消費されますか?リアクト対バニラ

Mary-Kate Olsen

リリース： 2024-10-22 06:24:30

オリジナル

407 人が閲覧しました

React は、他の JavaScript フレームワークと同様に、私たちが考えもしない多くのことを舞台裏で処理します。

それは問題ありません。開発者としての私たちの仕事は問題を解決することであり、実装はシンプルであるほど良いのです。フレームワークの機能をすべて詳細に理解する必要は必ずしもありません。

JavaScript は興味深い言語です。これはブラウザの王様であり、ブラウザは今でも頻繁に使用されているため、すぐに消えることはないと思います。

実際、多くのネイティブアプリ (iOS、Android、スマート TV) は、ネイティブテクノロジーと Web テクノロジーの両方を使用したハイブリッドソリューションを実行します。

この投稿では、React とバニラ JavaScript バージョンの単純なカウンターをテストしたいと思います。

Chrome DevTools を使用したパフォーマンスの測定

まず、Chrome が提供する「パフォーマンス」という便利なタブについて話しましょう。このタブには、Web アプリケーションのパフォーマンスを測定する記録機能が含まれています。

この投稿では、JS ヒープ、ノード、リスナーという 3 つの主要な指標に焦点を当てます。

JS ヒープ: ヒープは、オブジェクト、配列、関数が保存される JavaScript のメモリ領域です。プリミティブ値 (数値、文字列、ブール値) と関数呼び出しを保持するスタックとは異なり、ヒープは動的なメモリ割り当てを管理します。

DOM ノード: DOM ノードは、Web ページの 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>
  );
}

ログイン後にコピー

コードは一目瞭然です。注意すべき点の 1 つは、デモは Next.js 上で実行されるため、「クライアントを使用する」必要があるということです。それ以外は、単なる基本的な React コンポーネントです。

反応カウンター UI

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

20 秒でワンクリックだけ

ここで、Chrome で [パフォーマンス] タブを開き、レコードアイコンをクリックし、ボタンを 1 回だけクリックしながら 20 秒間実行します。 20 秒後のパフォーマンス結果は次のようになります:

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

ワンクリックで数値がどのように変化するかをご覧ください:

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

1 秒あたりのクリックで 20 秒

ここで、さらに 20 秒間実行します。今回は 1 秒に 1 回ボタンをクリックします。結果を見てみましょう:

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

	React
JS Heap	4MB
Nodes	46
Listeners	331

React について注意すべき 2 つの点:

a) 状態変数が更新されると、コンポーネントは再レンダリングされます。つまり、この場合、コンポーネントは 20 回レンダリングされたことになります。

b) 仮想 DOM のおかげで、React は更新する必要があるノードのみを更新します。

次に、グラフに戻って、緑の線 (ノード) が一定のままである一方で、青い線 (JS ヒープ) と黄色の線 (リスナー) がどのように増加するかを見てみましょう。

ワンクリック実行と比較して数値があまり変わらなかったことにも言及する価値があります。

デモ: Vanilla 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>
  );
}

ログイン後にコピー

言及すべきことの 1 つは、次の要素の必要性です:

<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 で操作されてコンテンツを更新します: