Научный журнал «Инновации. Наука. Образование» Индексация в ринц н Инновации. Наука. Образование
жүктеу/скачать 22,11 Mb. Pdf көрінісі
|
Номер 51 февраль 2022 года
| Инновации. Наука. Образование
низкоприоритетной, что и реализует React Fiber. В старой реализации согласователя (reconciler) рекурсивный обход и вызов метода рендеринга всего обновленного дерева происходит в одном потоке. Это приводило к потере кадров при больших и объемных операциях; 3. requestIdleCallback – функция, которая планирует отрисовку высокоприоритетной задачи перед следующим кадров анимации или отрисовки. Также данная функция планирует вызов низкоприоритетной функции, если не имеется более высокоприоритетных задач. В целом, fiber («волокно», структура, с которой работает алгоритм React Fiber) является обычным объектом JavaScript. Fiber представляет собой React элемент или узел DOM дерева. Он состоит из таких полей, как, идентификатор, тип fiber, тип DOM элемента, состояние, возвращаемое значение, индекс и т.п. При первичном рендеринге React рекурсивно проходит по каждому из React элементов и создает из них дерево объектов типа fiber. Хоть в большинстве своем упоминает именно дерево элементов, по факту это связанный список, где каждый элемент является fiber. React использует во время работы две версии виртуального дерева – current и workInProgress (рисунок 1). Дерево, которое в настоящее время передано для отображения пользовательского интерфейса или уже отрисовано, называется current. По сути, данное дерево хранит в себе текущее состояние React элементов. Всякий раз, когда происходит обновление, алгоритм React Fiber строит workInProgress дерево, которое создается на основе обновленных данных из элементов React. Затем React выполняет работу над деревом workInProgress и использует его для следующего рендеринга. Как только это workInProgress дерево отображается в пользовательском интерфейсе, оно становится current деревом. 846 Научный журнал «Инновации. Наука. Образование» Индексация в РИНЦ н жүктеу/скачать 22,11 Mb. Достарыңызбен бөлісу:
|