React15 と React16 のバージョンの違いは何ですか?

相違点: 1. バージョン 15 のアーキテクチャはコーディネーターとレンダラーの 2 つの部分に分かれていますが、バージョン 16 のアーキテクチャはスケジューラー、コーディネーター、レンダラーの 3 つの部分に分かれています。2. バージョン 15 のリコンサイラー再帰を使用する フォーム作業は同期であり、リコンサイラーの 16 バージョンでは、バージョン 15 の同期更新の代わりに非同期の中断可能な更新が使用されます。

#このチュートリアルの動作環境: Windows10 システム、react16&&react15 バージョン、Dell G3 コンピューター。

react15 とバージョン 16 の違いは何ですか

1.react15 のアーキテクチャは 2 つの層に分けることができます:

Reconciler (コーディネーター) - 更新する必要があるコンポーネントを見つけ、更新方法を特定します。

Renderer (レンダラー) - 変更されたコンポーネントをページにレンダリングする責任を負います

#2. Reconciler のアーキテクチャは 3 つの層に分けることができます:

Scheduler (スケジューラー) - スケジューリング タスクの優先順位、優先度の高いタスクが最初に Reconciler ステージに入ります

Reconciler (コーディネーター) - 更新する必要があるコンポーネントを見つけて、更新方法を特定します

レンダラー (レンダラー) - 変更されたコンポーネントをページにレンダリングする責任を負います

冒頭で次のように述べました。

ブラウザの 16.6 ミリ秒メカニズム

人間の目にとって、通常のスムーズなリフレッシュ レートは 60 Hz、つまり 60 フレームです。つまり、ブラウザは 16.6 ミリ秒に 1 回更新されます。

js が dom 要素を操作できることはわかっているので、ブラウザの GUI スレッドと js スレッドは相互に排他的です。 jsの実行とブラウザの描画・レイアウトを同時に行うことはできません。したがって、ブラウザは 16.6 ミリ秒ごとに次の操作を実行する必要があります。

JS スクリプトの実行 ------ ブラウザ スタイルのレイアウト ------ ブラウザ スタイルの描画

If js スクリプト実行時間が長すぎて 16.6 ミリ秒を超えています。この更新中にブラウザの描画とレイアウトを実行することはできません。これにより、人間の目で認識できる遅延が発生します。ブラウザは、更新中に「リアルタイム」で応答しないことがわかります。操作。たとえば、ユーザーが入力ボックスにコンテンツを入力する場合、キーボード ボタンを押すと反映されますが、入力はページ上にリアルタイムで表示されません。

15 と 16 の違い

react15 のリコンサイラーはスタック リコンサイラーです。つまり、再帰的な形式で動作し、同期的であり、仮想 DOM ツリーの生成と差分の処理中に中断することはできません。このように、コンポーネントレベルが深すぎるとjsの実行時間が長くなり、ブラウザでレイアウトや描画ができなくなりフレームロスが発生します。

react16 のリコンサイラーはファイバー リコンサイラーです。つまり、react15 の同期更新の代わりに、非同期の中断可能な更新が使用され、react16 のスケジューラーは、ブラウザーに js スクリプトを実行する空き時間があるかどうかをリコンサイラーに通知します。これはブラウザの描画やレイアウトの動作には影響しません。フレーム落ちはありません。

react16 では、元の仮想 DOM の構造が非同期の割り込み可能な更新のニーズを満たすことができなくなったため、代わりに新しい構造の Fiber が使用されます。仮想 DOM ノードはファイバー ノードに対応し、仮想 DOM ツリーはファイバー ツリーに対応します。

推奨される学習: 「

react ビデオ チュートリアル

」

以上がReact15 と React16 のバージョンの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。