目次
序文
Vue の始め方をステップバイステップで教えます、サルでも理解できるチュートリアル_Vue がステップバイステップで教えます_Intimate Baby のブログ - CSDN ブログ
- 動作原理は以前習ったVUEと似ているので、VUEの原理部分は参考になります。
コンポーネント VS インスタンス VS 要素
- コンポーネントは、JSX 構文を使用して UI の一部を記述する関数です。
- コンポーネントを呼び出すとき、それはコンポーネント インスタンスと呼ばれ、コンポーネント インスタンスには独自の状態とプロパティがあり、独自のライフサイクルもあります。
- コンポーネント インスタンスは、React.createElement() を通じて React にのみ存在する dom 要素を作成します。
- 最後に、React dom 要素を画面に描画します
- 部品は図面に相当し、部品を使うことは家を建てることに相当します。
レンダリングメカニズム
概要
- レンダリングは初期化中に 1 回実行されます
- また、コンポーネントの状態が変化するたびに実行されます。
- 注: レンダリングではコンポーネント ツリー全体がレンダリングされますが、変更された DOM 要素のみが更新されます。
ファイバーツリー
- 初期ビルド: React を初めてロードして、コンポーネント ツリーをファイバー ツリー (チェーン ストレージ) に変換します。各ファイバー ノードはコンポーネントまたは DOM ノードを表し、プロパティ、状態、子ノードなどのノードに関連する情報が含まれます。 . .
- 比較ステージ: Diff アルゴリズムを通じて前後の 2 つのファイバー ツリーの違いを比較し、更新する必要があるファイバー ノードをマークし、更新キューを構築して、ファイバー ツリーを更新します。
- 送信フェーズ: 更新キュー内の変更に基づいて実際の DOM 操作 (追加、削除、更新) を開始します。
- インクリメンタル レンダリング: 送信フェーズ中に、React は作業を複数の小さなタスクに分解し、タスクの優先順位とタイム スライスに従ってタスクの実行順序を動的にスケジュールします。
原理
- トリガーフェーズ: データステータスの変更または初期化
- レンダリング フェーズ: 仮想 DOM 要素を更新 => 差分比較用のファイバー ツリー => ファイバー ツリーを更新 => 更新が必要な DOM キューを生成
- コミットフェーズ: React は、コンポーネントの最新の状態を反映するために、必要に応じて DOM ノードを追加、更新、または削除します。
- ブラウザ描画: 画面への UI の更新
差分アルゴリズム
- 動作メカニズムは VUE と同様であるため、これ以上の説明は省略します。
レンダリングルール
UI
- 常にコンポーネントの最上部にある
- 関数はコンポーネントが画面上にどのように表示されるかを記述します。
- コンポーネントがレンダリングされるたびに更新されます
イベント
- イベントがトリガーされた場合にのみ更新されます
- 含まれる一般的なイベント: 状態の更新、http リクエスト、ファイルの読み取り、ページのジャンプ
純正コンポーネント
コンポーネントを純粋に保つ – React の中国語ドキュメント
ステータス一括更新
- イベント処理関数の更新は 1 つずつ再レンダリングされるのではなく、複数の状態がバッチで処理されます。
- このステータス更新が完了するまでは、通常、ステータスの最新値を出力することは不可能であり、次回まで待つしかありません。
- 本当に必要な場合は、コールバック関数を使用して更新できます。
- React のステータス更新は非同期で処理されます
- タイムアウト、プロミス、ネイティブ イベントは 17 ではバッチ処理されません。
イベントの仕組み
JS の原則
JS イベント メカニズムの簡単な分析: イベント キャプチャ、イベント バブリング、イベント委任 - Nuggets
イベントのキャプチャとバブリング
- JavaScript では、addEventListener メソッドを使用して、キャプチャ イベントとバブリング イベントをバインドできます。
element.addEventListener(event, handler, useCapture);
// event：具体的事件
// handler：处理的函数
// 指定什么事件：默认为false，事件在冒泡阶段处理
event.stopPropagation() //阻止事件冒泡，同级不阻止
event.stopImmediatePropagation() //阻止事件冒泡，同级阻止
イベントの代表団
概要: 実行効率を向上させるために、子要素から親要素への実行のためにバブル イベントをトリガーする
//事件代理 节约内存 提升性能(不需要注销子节点)
let ul = document.getElementById("ul");
ul.addEventListener("click", (event) => {
console.log(event.target.innerHTML);
})
反応の原則
- React はイベントをルート ノードに均一にバインドし、e.target に基づいてイベントをトリガーした要素を決定します。
- React は、イベント タイプを上記のコンテンツにラップして、さまざまなブラウザーでの一貫性のないイベント処理の影響を修正します。
- ネイティブと同じメソッドを持っています
- ラッパーの下のほとんどのイベントはスクロールを除いてバブルアップします。
フレームワーク VS ライブラリ
- フレームワーク: 多くの追加の必要なライブラリが組み込まれています。寿司を作るために原材料のパッケージ全体を購入するのと同じように、他の人がそれをパッケージ化します。比較的シンプルですが、柔軟性は良くありません
- ライブラリ: 追加のライブラリを自分で設定する必要があります。寿司を作るのと同じように、すべての材料を自分で購入する必要があります。柔軟性は優れていますが、自分で設定するのに時間がかかります。
- 写真のような一般的なライブラリの場合は、「次へ」を使用して、他の人が設定したものを使用することもできます。