الگوریتم‌ها (انیمیشن)در مرورگر شما اجرا می‌شودتاریخ بررسی: ۹ میزان ۱۴۰۵

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...