React Reconciliation

1.

React Reconciliation

2.

Какое самое слабое место в вебе?
• Обновление DOM дерева
Чего мы ждем от интерфейсов?
• Комфортны для глаза (не лагают, не дергаются)

3.

Почему некоторые интерфейсы
лагают?

4.

Насекомые - до 250ГЦ
Собаки и птицы - около 80ГЦ
Человек - 60ГЦ

5.

60 кадров в секунду
На каждый кадр приходится 16 миллисекунд

6.

Как React добился 60
кадров в секунду?

7.

Фаза 1
Rendering and
Reconciliation

8.

Все начинается с дерева
элементов
React
Elemen
t
React
Elemen
t
React
Elemen
t
React
Elemen
t
React
Elemen
t
React
Elemen
t
React
Element
React
Element

9.

Узел дерева React елементов:
1. {
2.
$$typeof : Symbol(react.element),
3.
type : 'button',
4.
props : {
5.
children : 'Click me',
6.
onClick : () => {...}
7.
8. }
}

10.

Дерево React элементов не единственное
React Elements Tree
Fiber Tree
R
E
F
R
E
RE
RE
F
RE
RE
RE
F
RE
F
F
F
F
F

11.

{
stateNode,
memoizedProps,
memoizedState
Fiber
}

12.

Fiber – tree?

13.

Child
Fiber -Linked List
Return (parent)
Fiber
Sibling
Fiber
Fiber
Fiber
Fiber
Fiber
Fiber
Fiber

14.

Effect

15.

Fiber
Fiber
Fiber
Fiber
Fiber
Fiber
Fiber
Fiber

16.

Effects – data fetching, subscriptions, or
manually changing DOM
Эффекты - запрос данных, подписки и
изменения DOM

17.

Все эффекты связанны
[
,
,
,
]

18.

19.

Процесс обновления

20.

WorkinProgress
Tree
Current Tree
Clone
F
F
F
setStat
e
F
F
F
F
F
F
F
F
F
F
F

21.

Этот процесс можно прервать и отменить
Current Tree
Next until of work
WorkinProgress Tree
F
F
F
F
F
F
F
F
F
F

22.

Эвристика

23.

24.

Порядок сложности алгоритма сравнения
деревьев
O(n3), где n - число элементов в дереве
Количество операций на одно изменение
Например: при n = 1,000 ~ 1,000,000,000

25.

Разработчики React выделили 2 правила
• Элементы разных типов - разные деревья
• Можно использовать key, чтобы пометить какие
элементы будут стабильны в разных рендерах

26.

Фаза 2
Commit

27.

60 кадров в секунду
На каждый кадр приходится 16 миллисекунд