React 並行関数エクスペリエンス (フロントエンド並行モード)

React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオープンソースの JavaScript ライブラリであり、インタラクティブなユーザーインターフェイスと UI コンポーネントの構築をサポートします。 React は Facebook のソフトウェアエンジニア Jordan Walke によって作成されました。React の最初のバージョンは 7 年前にリリースされ、現在は Facebook によってメンテナンスされています。 React フレームワークの最初のリリース以来、React の人気は急上昇し、成長し続けています。
2020年10月にReact 17がリリースされましたが、驚くべきことに「新機能はゼロ」でした。もちろん、これはプログラマーコミュニティを興奮させるような新しい機能がまったく追加されていないことを意味するものではありません。実際、このバージョンではバージョン 16 の多くの主要な機能アップグレードとバグ修正が行われ、並行モードとサスペンスが導入されています。
これら 2 つの機能はまだ正式にリリースされていませんが、開発者がテストできるように公開されています。リリースされると、React の UI レンダリング方法が変更され、パフォーマンスとユーザーエクスペリエンスが倍増します。

簡単に言えば、並行モードとサスペンスにより、ユーザーはデータの読み込み、読み込みステータス、およびユーザーインターフェイスの操作をよりスムーズかつシームレスに処理できるようになります。並行モードでは、React はコストが高く緊急でないコンポーネントのレンダリングを一時停止し、UI レンダリングなどのより緊急なタスクに集中することで、アプリケーションの応答性を常に維持し、白い画面やフリーズなどの現象を回避できます。

この記事では主に、同時実行モードとサスペンスモードでのデータ抽出機能について詳しく説明します。

なぜ同時実行モードが必要なのでしょうか?

ご存知のとおり、JavaScript フレームワークまたはライブラリはシングルスレッドワーカーです。したがって、1 つのコードブロックが実行されると、残りのブロックは実行を待機する必要があります。複数の作業スレッドを同時に実行できません。インターフェースのレンダリングについても同様です。
React が何かのレンダリングを開始すると、完了するまでそれを中断する方法はありません。 React 開発者は、この種のレンダリングを「ブロッキングレンダリング」と呼びます。このレンダリングのブロックにより、いつでも応答が停止する可能性のある不安定なユーザーインターフェイスが作成されます。

具体的な問題

製品アプリケーションをフィルタリングするために、選択可能な長いリストを表示する必要があるとします。レコードをフィルタリングするには検索ボックスを使用します。設計上、ユーザーが検索ボタンをクリックすると、ユーザーインターフェイスが更新され、関連データがリストされる必要があります。

リストが長すぎてデータが多すぎる場合、UI が「途切れる」、つまりレンダリングがユーザーに見える状態になります。この遅延により、製品のパフォーマンスも大幅に低下します。開発者は、スロットリングやデシェイキングなどのテクニックを使用できますが、これらは役立つものの、完璧な解決策ではありません。
スロットルは、特定の関数を呼び出すことができる回数を制限します。スロットルを使用すると、コストがかかり時間のかかる API や関数の繰り返し呼び出しを回避できます。このプロセスにより、特にユーザーインターフェイスで情報を表示するときにパフォーマンスが向上します。

デバウンスは、事前に決められた時間の間、関数の呼び出しを無視します。関数呼び出しは、あらかじめ決められた時間が経過した後にのみ行われます。

次の図は、妨害現象を説明しています。
緊急でない API 呼び出しが完了するのを待機している間、UI がフリーズし、ユーザーインターフェイスがレンダリングされなくなります。解決策は、中断可能なレンダリングに同時モードを使用することです。

中断のないレンダリング

中断可能なレンダリングを使用すると、React.js はリストの処理と再レンダリング中に UI をブロックしません。単純な作業を一時停止し、DOM を更新し、UI が遅れないようにすることで、React.js をより細かく制御します。 React は、ユーザー入力と並行して入力ボックスを更新または再描画します。 React はユーザー入力を消費し、入力ボックスを並列に再描画します。メモリ内のリストも更新されます。 React は更新が完了すると、DOM を更新し、ユーザーのディスプレイにリストを再レンダリングします。本質的に、中断のないレンダリングにより、React は「マルチタスク」を実行できます。この機能により、よりスムーズな UI エクスペリエンスが実現します。

同時実行モード

並行モードは、React アプリケーションの応答性を維持し、ユーザーのデバイスとネットワーク速度の機能にスムーズに適応できるようにする機能セットです。同時実行モードでは、タスクが小さなチャンクに分割されます。 React のスケジューラは実行するジョブを選択できます。ジョブのスケジュールは優先度に応じて異なります。タスクに優先順位を付けることにより、些細なことや緊急でないことを中止したり、さらに先送りしたりすることができます。 React は常に UI の更新とレンダリングを最優先します。

同時実行モードを使用すると、次のことが可能になります。

最初のレンダリングプロセスの制御
レンダリングプロセスの優先順位付け
コンポーネントのレンダリングを一時停止および再開する
コンポーネントのランタイムレンダリングのキャッシュと最適化
表示されるコンテンツを必要になるまで非表示にする

並行モードでは、UI レンダリングに加えて、受信データへの応答性、コントロールの遅延読み込み、非同期処理が向上します。並列モードでは、ユーザーインターフェースが常にアクティブであり、バックグラウンドでデータを更新し続けることが保証されます。並列モードでは、Reactの2つのフック、 useTransitionとuseDeferredValueも常に使用されます。

useDeferredValue Hookの使用

useDeferredValue Hookの定義は次のとおりです。

const deferredValue = useDeferredValue(value, { timeoutMs: <何らかの値> });

このコマンドは、 timeoutMsで設定された時間後に値を「lag」に設定します。 UI をすぐに更新する必要がある場合でも、データを待機する必要がある場合でも、このコマンドは UI をアクティブで応答性の高い状態に保ちます。このフックは UI のフリーズを回避し、常に UI の応答性を維持して、データ取得の遅延コストを小さく抑えます。

トランジションフックの使用

useTransition Hook Reactで中断に使用される主なHookです。ユーザー名ボタンのある Web ページがあるとします。ボタンをクリックするだけで、Web ページの画面にユーザーの詳細が表示されます。
ユーザーが最初に 1 つのボタンをクリックし、次に次のボタンをクリックするとします。画面が空白になるか、画面上にスピナーが表示されます。詳細情報の取得に時間がかかりすぎると、UI がフリーズする可能性があります。
useTransitionメソッドは、 startTransitionとisPending 2 つのHookの値を返します。定義の構文は次のとおりです。

const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

startTransition定義の構文は次のとおりです。

<ボタンが無効={isPending}  
  開始遷移(() => {  
        <フェッチ呼び出し>  
  });  
  </ボタン>  
  {isPending? " 読み込み中...": null}

useTransitionフックを使用すると、 React.jsユーザーの詳細が準備されるまでユーザーの詳細なしで UI を表示し続けます。ただし、UI は応答します。 React 、並行してデータを取得しながらも応答性を維持するためにユーザーインターフェイスを優先します。

データ取得のサスペンス

Suspense 、Concurrent Mode とともにReactによって導入されたもう 1 つの実験的な機能です。 Suspense使用すると、コンポーネントはレンダリングする前に所定の時間待機できます。
Suspenseの主な目的は、データの出所を気にせずにコンポーネントから非同期的にデータを読み取ることです。 Suspense 、遅延読み込みの概念で最も効果的に機能します。 Suspense使用すると、データ取得ライブラリはReactコンポーネントにデータが利用可能かどうかを通知できます。 React必要なコンポーネントが準備されるまで UI を更新しません。

Suspenseを使用する利点:

1. データ取得ライブラリとReactコンポーネントの統合

2. 視覚的な読み込み状態を制御する

3. 競合状態を避ける

Spinnerコンポーネントの基本的な構文は次のとおりです。

'./Spinner' から Spinner をインポートします。  
    <サスペンスフォールバック={<スピナー />}}>  
      <あるコンポーネント />  
</サスペンス>

Concurrent Modeで使用されるSuspenseにより、時間のかかるコンポーネントはデータを待機しながらレンダリングを開始できます。プレースホルダーも表示します。この組み合わせにより、よりスムーズな UI エクスペリエンスが実現します。

サスペンスと遅延読み込みコンポーネント

React.lazy 、 React.jsコンポーネントを遅延ロードできるようにする新しい機能です。遅延読み込みとは、必要なときにのみコンポーネント (コンポーネントを取得してレンダリングするコード) を読み込むことを意味します。最も重要な UI コンポーネントを優先します。 React開発者は、遅延ロードされるコンポーネントをSuspenseコンポーネントでラップすることを推奨しています。
これを行うと、コンポーネントがレンダリング時に「不良な状態」にならないことが保証されます。 UI はプロセス全体を通じて応答性を維持し、よりスムーズなユーザーエクスペリエンスを実現します。

同時モードを有効にする

同時実行モードを有効にするには、最新のベータ版をインストールしてください。 React をインストールするための前提条件は、Node Package Manager (npm) です。テストバージョンをインストールするには、次のコマンドを実行します。

npm をインストール react@experimental react-dom@experimental

テストビルドがセットアップされていることをテストするには、サンプルの React アプリケーションを作成します。テスト関数なしのレンダリングコードは次のとおりです。

'react' から * を React としてインポートします。  
  'react-dom' から render をインポートします。  
  レンダリング(<App />、document.getElementById('root'));

同時実行モードの具体的なコードは次のとおりです。

'react' から * を React としてインポートします。  
    'react-dom' から createRoot をインポートします。  
ルートを作成します(document.getElementById('root'))。レンダリングします(<App />);

これにより、アプリケーション全体で同時実行モードが有効になります。 React はレンダリング呼び出しを 2 つの部分に分割します。

ルート要素の作成
レンダリング呼び出しの使用

現在、React は次の 3 つのモードを維持する予定です。

レガシーモードは、レガシーモードまたは現在のモードと下位互換性があります。
ブロッキングモードは並行モード開発の中間段階です
同時実行モード

ブロッキングモードでは、createRoot 呼び出しが createBlockingRoot 呼び出しに置き換えられます。同時開発の場合、ブロッキングモードでは、開発者にバグを修正したり問題を解決したりする機会が提供されます。

React の公式ドキュメントでは、各モードでサポートされている機能についても説明されています。

サンプルアプリケーション:

この記事では、同時実行モードやその他のモードの使用方法と効果を確認するためのテストプログラムも作成します。この記事では、ピクセルアプリケーションを例に、150 x 150 のキャンバスにピクセルをランダムに分散し、検索ボックスを含めます。ユーザーが検索ボックスをクリックするたびに、キャンバスが再レンダリングされます。
UI を並行モードでレンダリングできない場合でも、ユーザー入力の更新は停止しません。処理が完了すると、ピクセルキャンバスが再レンダリングされます。レガシーモードでは、すばやく入力すると、キャンバスが再度レンダリングされる前に UI がフリーズすることがありました。ユーザー入力も停止し、更新されません。

ピクセルアプリケーションを構築するためのメインファイルは canvas.js です。ユーザーが何でも入力できる入力ボックスも作成しました。キーが押されるたびにピクセルキャンバスが再レンダリングされます。

コード例: Index.js

「react」からReactをインポートします。  
    「react-dom」からReactDOMをインポートします。  
    「./App」からAppをインポートします。  
    // 従来型または非並列モードの反応  
    定数 rootTraditional = document.getElementById("root");  
    ReactDOM.render(<App caption="従来のレンダリングまたはブロックレンダリング" />,  
    ルート伝統的);  
    // 同時実行モードが有効  
    const rootConcurrent = document.getElementById("root-concurrent");  
    ReactDOM.createRoot(rootConcurrent).render(<App caption="中断可能  
レンダリング" />);

アプリ

React をインポートし、{useState、useDeferredValue} を "react" からインポートします。  
  「./App.css」をインポートします。  
  「./Canvas」から { Canvas } をインポートします。  
  デフォルト関数 App(props) をエクスポートします。  
  { const [値、setValue] = useState("");  

 //これは同時実行モードでのみ使用できます。

    const deferredValue = useDeferredValue(値、{  
      タイムアウト時間: 5000  
    });  

    定数keyPressHandler = e => {  
      setValue(e.target.value);  
    };  

    戻る （  
      <div className="アプリ">  
        <h1>{props.caption}</h1>  
        <input onKeyUp={keyPressHandler} />  
        <キャンバス値={deferredValue} />  
      </div>  
    );  
  }

キャンバス

「react」からReactをインポートします。  
   定数 CANVAS_SIZE = 70;  
   const 生成ランダムカラー = () => {  
    var 文字 = "0123456789ABCDEF";  
    var color = "#";  
    (var i = 0; i < 6; i++) の場合 {  
      色 += 文字[Math.floor(Math.random() * 16)];  
    }  
    色を返します。  
  };  
   const createCanvas = (行、列) => {  
    配列 = [] とします。  
    (i = 0; i < 行; i++) の場合 {  
      行を[]とします。  
      (j = 0; j < 列; j++) の場合 {  
        行をプッシュ(0);  
      }  
      配列をプッシュします(行);  
    }  
    配列を返します。  
  };  
   //これはピクセルのある正方形です  
  const drawCanvas = 値 => {  
    定数 キャンバス = createCanvas(CANVAS_SIZE, CANVAS_SIZE);  
    キャンバス.map((行, 行インデックス) => { を返します  
      cellsArrJSX = row.map((cell, cellIndex) => { とします。  
        キーを rowIndex + "-" + cellIndex とします。  
        戻る （  
         <div  
            スタイル={{ backgroundColor: generateRandomColor() }}  
            クラス名="セル"  
            キー={"セル-" + キー}  
          />  
        );  
      });  
      戻る （  
        <div キー = {"row-" + rowIndex} クラス名 = "canvas-row">  
          {セルArrJSX}  
        </div>  
      );  
    });  
  };  
  エクスポートconstCanvas = ({値}) => {  
    戻る （  
     <div>  
        <h2 style={{ minHeight: 30 }}>{値}</h2>  
       <div className="canvas">{drawCanvas(値)}</div>  
     </div>  
   );  
 };

インデックス.html

<!DOCTYPE html>  
  <html lang="ja">  
    <ヘッド>  
      <メタ文字セット="utf-8" />  
      <メタ  
        name="ビューポート"  
        content="width=デバイス幅、初期スケール=1、縮小してフィット=いいえ"  
      />  
      <meta name="テーマカラー" content="#000000" />  
      React アプリの並行モード  
    </head>  
    <本文>  
      <スクリプトなし>  
     このアプリを実行するには、JavaScript を有効にする必要があります。  
      </noscript>  
      <div id="コンテナ">  
        <div id="ルート" class="列"></div>  
        <div id="ルート同時" class="列"></div>  
      </div>  
    </本文>  
  </html>

例を実行する

コードを見てみましょう。最初に表示される画面はスプラッシュ画面です。従来のブロックレンダリングを使用するのが、React で現在行われている方法です。割り込み可能なレンダリングは、同時実行モードのベータ機能です。まずは従来のレンダリング作業について見てみましょう。

ピクセルキャンバスはキーを押すたびに再レンダリングされます。従来のレンダリングでは、画面を再レンダリングできるようになるまで、キー入力ごとに UI 全体が一時停止します。この間、入力を続けててもユーザー入力は更新されません。

次の画像は、中断可能なレンダリングを示しています。中断可能なレンダリング中、ユーザーは入力を続行できます。キーストロークごとにキャンバスが並行して再レンダリングされている間、UI は停止したり停止したりしません。

再レンダリングが完了すると、React は UI を更新します。静的なスクリーンショットではわかりにくいですが、グリッドが変化しているにもかかわらず、ユーザーは UI の遅延なしに入力できることがわかります。

要約する

この記事では、React と Suspense での並行性のテストについて説明しました。並行モードを使用すると、React.js はユーザーインターフェイスを常に応答性の高い状態に保ちます。アプリケーションのタスクをより小さなチャンクに分割し、ユーザーインターフェイスタスクの優先順位付けを可能にします。したがって、このモードでは、よりスムーズでシームレスなユーザーエクスペリエンスが提供され、アプリケーションの全体的なパフォーマンスが向上します。

同時実行モードと組み合わせることで、サスペンスによりユーザーインターフェイスの応答性を維持できます。同時に、データの取得などの負荷が高く時間のかかるタスクを並行して完了できるため、全体的にシームレスなエクスペリエンスが実現します。

並行モードの詳細については、公式の React ドキュメントをご覧ください。
React バージョンの改善により、React フレームワークはますます多くの中国のフロントエンド開発者に知られるようになり、プロジェクト開発で広く使用されるようになりました。これは、Vue.js に続くもう 1 つの人気のフロントエンド主流フレームワークです。現在、React フレームワークとの統合をサポートする多くの機能ツールがそこから派生しています。たとえば、フロントエンドレポート ActiveReportsJS コントロールは、React と直接統合されたオンラインエディターとレポート表示ツールを提供し、フロントエンドのデータ表示機能を向上させます。

これで、React 並行性エクスペリエンス - フロントエンド並行モードの登場に関するこの記事は終了です。React 並行性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: