問題タブ [virtual-dom]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
147 参照

javascript - 大きなリスト内の React の子に対する重複キーのパフォーマンスへの影響

React Documentation on Reconciliationは言う

子にキーがある場合、React はそのキーを使用して、元のツリーの子と後続のツリーの子を照合します。

すべてのリスト項目が一意のキーを持つため、リスト項目が変更されない場合は DOM を更新する必要がないことを理解しています。

ただし、一意のキーを持つ 1000 個の要素の大きなリストがあり、3 つの要素に重複するキーがある場合はどうなるでしょうか。一意のキーを持つ他のすべてのリスト項目は、再レンダリングされても安全ですか? または、同じキーを持ついくつかのアイテムはrender、差分アルゴリズムが役に立たないのでしょうか?

0 投票する
1 に答える
1383 参照

dom - Angular 2 の DOM 操作

Angular 2 の内部 DOM 操作について「簡単な」質問があります。Virtual DOM、Incremental DOM などを使用する Angular 2 です。Angular 2 が内部で DOM 操作に使用するものを理解するために、インターネット全体を調べてきましたが、見つからないようです。

彼らがコンポーネントを作成する方法と、開発者が希望するカプセル化戦略を使用できるようにする方法を理解しています.

ゾーンを使用して変更を検出し、オブザーバブルを使用して変更を適用することは理解していますが、内部DOM操作のための独自のロジックを思いついたのですか、それとも実際のDOMを操作していますか?

React には仮想 DOM があり、Ember は glimmer を使用し、他のフレームワークはインクリメンタル DOM を使用します。Angular 2 は何を使用しますか?

ティア。

0 投票する
1 に答える
1835 参照

reactjs - React - 状態データがレンダリングに表示されるようになりました

コンソール ログに基づいて State Array を更新しているようです。レンダーがハンドラーまたはライフサイクル自体でどのように機能しているかについて、おそらく何かが欠けています(申し訳ありませんが、Reactを学習しています)。おそらくこれを別のコンポーネントに送信してから、そのカスタムコンポーネントを自分のページにレンダリングする必要がありますか?? 簡略化したコードを次に示します。

単一の要素 (配列ではない) を追加するだけで、要素の状態を更新するのに問題はなく、基本的に何もない状態から何かに移行しました。配列に連結したので、私のライフサイクルでは、ページが最初にロードされたときに配列内の [0] インデックスをアドレス指定できないと思いますか?? この DOM (仮想 DOM) ライフサイクルでいくつかの注文操作が欠落していると確信しています。それはすべて私にとってかなり新しいものです。State Array オブジェクトが追加されたときのレンダリングをどのように処理しますか (明らかに何もない状態から始めます)。