⭐️ この記事は、最初にFront-end。はい
一个由 资深开发者 独立运行 的专业技术社区、集中していWeb 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展ます . ブロガーが作成した「フロントエンドインタビューレビューノート」（クリックして購読） は広く賞賛されており、多くの学生が自分の強みを改善してオファーを得るのに役立っています. 今すぐ購読して、ブロガーと個人的にチャットして、知識ポイントの習得を評価し、より包括的な学習ガイダンスを得るのに役立つ無料の模擬面接/履歴書ガイダンス サービスを取得してください!
React 18 は 2022 年 3 月にリリースされます。このリリースでは、パフォーマンスの向上とレンダリング エンジンの更新に重点を置いています。一方、React 18 は同時レンダリングの基礎を築き、その上に将来の React 機能が構築されます。
この記事では、React 18 を簡単に紹介しtransitions、 .
React 18 機能の概要
| カテゴリー | 関数 |
|---|---|
| 概念 | 同時実行 |
| 特性 | 自動バッチ処理、トランジションなど |
| API | createRoot、ハイドレートルート、renderToPipeableStream、renderToReadableStream |
| フック | useId、useTransition、useDeferredValue、useSyncExternalStore、useInsertionEffect |
| 更新する | 厳格モード |
| 放棄された | ReactDOM.render、renderToString |
以下では、上記の機能と特徴をより詳しく説明します。まず、React 18 にアップグレードしましょう
React 18 にアップグレードする
最初に次のコマンドを実行します。
npm install react react-dom
次に、index.jsでにReactDOM.render変更してノードReactDOM.createRootを作成し、rootそのrootノードを使用してアプリケーションをレンダリングします。
React 17 では次のようになります。
import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('app');
ReactDOM.render(<App />, container);
更新後、React 18 では次のようになります。
import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('app');
// 创建 root
const root = ReactDOM.createRoot(container);
//渲染
root.render(<App />);
同時実行
並行性を理解するために、公式の例を次に示します。
Alice と Bob の 2 人に電話をかける必要があるとします。非同時セットアップでは、一度に 1 つの呼び出ししかできません。最初に Alice に電話し、終了したら Bob に電話します。
通話時間が短い場合はこれで問題ありませんが、Alice への通話の待機時間が長い場合 (待機中など) は問題になる可能性があります。
一方、並行セットアップでは Alice に電話をかけ、保留になったら Bob に電話することができます。
2 人同時に話しているという意味ではありません。これは、同時に 2 つ以上の呼び出しを同時に行い、どちらの呼び出しがより重要であるかを判断できることを意味します。
また、同時レンダリングを備えた React 18 では、React は中断、暂停、恢复或放弃渲染. これにより、重いレンダリング タスクを実行している場合でも、React はユーザー インタラクションにすばやく応答できます。
React 18 より前は、レンダリングは、一度レンダリングが開始されると中断できなかった、中断のない単一の同期トランザクションでした。
React 18 では、同時レンダリングの基盤が導入され、suspenseストリーミング サービスのレンダリングや.transitions
React 18 の新機能
自動バッチ処理
React 18 には自動バッチ処理があります。バッチ処理を理解するために、公式ストア ショッピングの例を参照してみましょう。
あなたが夕食にパスタを作っているとしましょう。しかし、パスタを作るのに必要な材料がないことがわかったので、店に行ってそれらを購入する必要があります.
そんな時、料理を始めて食材が足りないことに気づき、店に行って食材を買い、戻ってきて料理を続けます。戻ってきて、別の材料が必要だとわかったら、店に行ってそれを買います...そして戻ってきます. このままだとまず気が狂ってしまうかもしれません。
React では、setState を呼び出すと、状態が変化したときに発生する再レンダリングの回数をバッチ処理によって減らすことができます。以前は、React は次のようにイベント ハンドラーでバッチ状態を更新していました。
const handleClick = () => {
setCounter();
setActive();
setValue();
}
// 最后重新渲染一次。
ただし、イベント ハンドラーの外部で発生する状態の更新はバッチ処理されません。たとえば、1 つPromiseまたは API 呼び出しが進行中の場合、状態はバッチで更新されません。このような：
fetch('/network').then( () => {
setCounter(); // 重新渲染 1 次
setActive(); // 重新渲染 2 次
setValue(); // 重新渲染 3 次
});
//一共重新渲染 3次
ご存知のように、これはパフォーマンスの高い方法ではありません。React 18 では自動バッチ処理が導入されました。これにより、およびすべての状態更新のバッチ処理が可能になります。Promise、setTimeoutsこれにより、React がバックグラウンドで行う作業が大幅に削減されます。Reactは、マイクロタスクが完了するのを待ってから再レンダリングします。
自動バッチ処理はReactですぐに使用できますが、オプトアウトしたい場合は使用できますflushSync。
トランジション
遷移は、React 18 で導入されたまったく新しいもの
并发特性です。可以被中断执行これにより、マークアップをトランジションとして更新できます。これにより、React にそれらについて通知されます避免回到已经可见内容的 Suspense 降级方案。
たとえば、入力中にカーソルが点滅し、バックグラウンドでデータが検索されます。
検索したデータをユーザーに提示することが急務ではないと思われる場合は、このアクションを としてマークできますtransitions。このようにして、React はどの更新が優先されるかを知ることができます。これにより、レンダリング パフォーマンスを簡単に向上させることができます。
使用中、React では、更新を としてマークするためstartTransitionにtransition。マークアップを使用したtypeaheadコンポーネント。transitions
import {
startTransition } from 'react';
// 紧急
setInputValue(input);
// 非紧急: 将内部的任何非紧急状态更新标记为 Transition
startTransition(() => {
setSearchQuery(input);
});
トランジションは debounce や setTimeout とどう違うのですか?
- setTimeout とは異なり、startTransitionはすぐに実行されます。
- setTimeout には保証された遅延がありますが、startTransition にはデバイスの速度やその他の緊急レンダリングに依存する遅延があります。
- setTimeout とは異なり、startTransition の更新は、ページをフリーズすることなく中断できます。
- startTransition としてマークされている場合、Reactは保留中の状態を追跡できます。
サスペンスSSR
クライアント側レンダリングとサーバー側レンダリング
クライアント側でレンダリングされたアプリケーションでは、ページの HTML がサーバーから読み込まれ、ページの実行に必要な JavaScript も読み込まれます。
ただし、JavaScript バンドルが大きい場合や接続が遅い場合は、このプロセスに時間がかかることがあります。
ユーザー エクスペリエンスを最適化し、ユーザーが空白の画面に座っているのを避けるために、サーバー レンダリングを使用できます。
サーバー レンダリングは、React コンポーネントの HTML 出力をサーバー上でレンダリングし、サーバーから HTML を送信する手法です。これにより、JS バンドルがロードされ、アプリケーションがインタラクティブになる前に、ユーザーはいくつかの UI を見ることができます。
サーバー レンダリングは、ページをロードするユーザー エクスペリエンスをさらに向上させ、操作時間を短縮します。
React 18 より前は、この部分がアプリケーションのボトルネックになることが多く、コンポーネントのレンダリングにかかる時間が増加していました。
コンポーネントが遅いと、ページ全体が遅くなる可能性があります。これは、サーバー レンダリングがすべてかゼロかのいずれかであるためです。遅いコンポーネントのロードを延期するように React に指示することはできません。また、React に他のコンポーネントの HTML を送信するように指示することもできません。
React 18 はSuspense、。サスペンスの助けを借りて、アプリケーションの遅い部分をSuspensecomponents、React に遅いコンポーネントを遅延ロードするように指示できます。これは、ロード時に表示できるものを指定するためにも使用できます加载状态。
React 18 では、1 つの遅いコンポーネントがアプリケーション全体のレンダリングを遅くする必要はありません。サスペンスを使って、可以告诉 React 首先发送其他组件的 HTML 以及占位符的 HTML. 次に、当慢速组件准备好并获取其数据时，服务器渲染器将在同一流中弹出其 HTML.
このようにして、ユーザーは早い段階でページの骨組みを確認し、より多くの HTML が到着するにつれて、より多くのコンテンツを表示することができます。
これらはすべて、JS または React がページに読み込まれる前に行われるため、ユーザー エクスペリエンスとユーザーが認識する待ち時間が大幅に改善されます。
厳格モード
React 18 の Strict モードには模拟安装、卸载和重新安装、以前の状態のコンポーネントがあります。これ可重用状态により、アンマウントする前に同じコンポーネントの状態でツリーを再インストールすることで、React が前の画面をすぐにマウントできる将来の準備が整います。
Strict モードは、コンポーネントが複数のインストールおよびアンインストールの影響に対して回復力があることを保証します。
終わり
全体として、React 18 は将来のリリースの準備を整え、ユーザー エクスペリエンスの向上に重点を置いています。