Angular 2に再レンダリングの最適化がありますか？

Question

私は数ヶ月の間にReactを使用していましたが、Reactは単にコンポーネントを完全に再描画するのではなく、違いを見つけてそれらの変更を行います。 Angular 2はこのようなことをしますか？

また、状態の変化が検出されると、すべてのコンポーネントがルートノードから再描画されるか、変更が検出された特定のコンポーネントとそのサブツリーのみが再描画されますか？

Answer 1

Reactは単にコンポーネントを完全に再描画するのではなく、違いを見つけてそれらの変更を行います。 Angular 2はこのようなことをしますか？

概念的には、コンポーネント全体を再レンダリングしません。

Angularは、コンポーネント/ディレクティブごとにチェンジディテクタオブジェクトを作成します。テンプレートバインディング（入力プロパティバインディングを含む）は、これらの変更検出オブジェクト内で追跡されます。変更検出が実行されると、デフォルトでは、各バインディングは変更がないかどうかチェックされます。変更が見つかった場合、変更された値は子コンポーネント（入力プロパティが変更された場合）またはDOMに伝播されます。それでおしまい。テンプレート/ビュー全体が再レンダリングされません。変更された値のみがDOMで更新されます。 Angular change detectionが終了すると、ブラウザはDOMの変更を認識し、画面に表示されている内容を更新します。

状態の変化が検出されると、Angular 2はすべてのコンポーネントをルートノードから再描画するか、変更が検出された特定のコンポーネントとそのサブツリーのみを再レンダリングしますか？

角度は、一部のモデル/データオブジェクトの変更を検出しません。むしろ、テンプレートバインディングの変更を検出するだけです。

デフォルトでは、変更検出が実行されるたびに、ルートコンポーネントから開始され、変更検出器オブジェクトを使用してすべてのコンポーネントの深度優先度順の変更をチェックします。上記のように、変更を伴うテンプレートバインディングのみが更新されます。したがって、私はAngularがコンポーネントを再レンダリングするとは言わないでしょう...それは、テンプレートバインディングが変更されたDOMの部分を変更するだけです。

OnPush変更検出ストラテジを使用してコンポーネントとその子孫の変更がいつチェックされるかを制限するコンポーネントを構成できます。また、変更検出ツリーのコンポーネントを完全にdetach()にすることもできます。これは、再接続するまでコンポーネントとその子孫が検出されないことを意味します。

Answer 2

角度は、変更を検出するレンダリングのみです。

AFAIK *ngForにはいくつかの改善の余地がありますが、途中や追加時に追加/削除されたときにあまりにも多くのアイテムを再描画することがありますが、これは最終的には修正される予定です。バインド値が変更されたときに、それは何もしないだけで、その後、それだけで、それが変化した値にバインドされているDOMを変更するので、角度が再レンダリングの最適化を必要としない事実

以下の私のコメントから

。 Angularには、実際のDOMにミラーリングする必要がある仮想DOMはありません。

Answer 3

AngularはReact doとして仮想DOMを使用していません。 Angularの文脈でその必要はありません。

<input>があり、その値を実行時に別の値に設定する必要がある場合は、その周りのすべてのDOMを変更する必要はありません。その要素に対してsetValue（）を呼び出すだけです。それだけです。

他のDOM要素でも同じことが言えます。あなたはこの持っている場合たとえば：

<div>{{someVar}}</div> 

と角度をSOMEVARは、それだけでその特定の<div>の内容を変更します変更されたことを検出しました。

Answer 4

角度2は、のレンダリングでzone.jsをに使用しています。通常、変更が検出されると、changeDetectionそのコンポーネントとすべての子がトリガされますが、これを変更して、何かをレンダリングしたり、angle2の動作が嫌いなときにレンダリングしたりすることもできます。

はここについては非常に良い話ですかAngular2 change detection作品：https://www.youtube.com/watch?v=CUxD91DWkGM

LE：だけ明確にするために、それはそれらのすべてを検出し、変更をトリガする、コンポーネントおよびすべての子を再表示されません、必要なものだけをレンダリングします。