الګوریتمونه (انیمیشن)ستاسو په براوزر کې چلېږيد کتنې نېټه: د AP ۱۴۰۵ د تله ۹

Virtual DOM Diff (Keys): انیمیشن

Virtual DOM Diff (Keys): انیمیشن. د فرنټ‌اینډ لپاره متحرک الګوریتمونه: ترتیبول، لټون، debounce او throttle، د پېښو کړۍ، مجازي DOM، کیش، trie او لار موندل. ستاسو په براوزر کې چټک، شخصي او اسانه.

محليپه ډیفالټ توګه شخصيچټکد نوم لیکنې پرته

د لاندې وسیلې تڼۍ او متنونه اوس مهال په انګلیسي دي.

Browser and DOMTime: O(n)Space: O(n)

List before (keys)List after (keys)Matching strategy

<ul>

DOM operations: 0

empty

Step 1 / 8

Each item has a key. React/Vue use keys to recognise the same item even when it moves, so unchanged DOM nodes are reused.

JavaScript

1function reconcileKeyed(oldList, newList) {
2  const oldPos = new Map(oldList.map((n, i) => [n.key, i]));
3  const newKeys = new Set(newList.map((n) => n.key));
4  let lastIndex = 0;
5  for (const next of newList) {
6    const i = oldPos.get(next.key);
7    if (i === undefined) insert(next);
8    else if (i < lastIndex) move(next);
9    else lastIndex = i;
10  }
11  for (const old of oldList) {
12    if (!newKeys.has(old.key)) remove(old);
13  }
14}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...