Научный журнал «Инновации. Наука. Образование» Индексация в ринц н Инновации. Наука. Образование
жүктеу/скачать 22,11 Mb. Pdf көрінісі
|
Номер 51 февраль 2022 года
- Бұл бет үшін навигация:
- Рисунок 1. Current и WorkInProgress деревья
- Инновации. Наука. Образование
| Инновации. Наука. Образование
Узел B2 удален Current дерево WorkInProgress дерево А1 B1 B2 C2 C1 A1 B1 C1 C2 D1 A1 Узел дерева без изменений C1 D1 Узел обновлен, ререндеринг Новый узел Рисунок 1. Current и WorkInProgress деревья Источник: анализ автора Обход дерева fiber элементов происходит следующим образом: Старт. Fiber начинает обход с самого верхнего элемента React и создает для него узел дерева (например, А1 на рисунке 1). Дочерний. затем он переходит к дочернему элементу и создает узел fiber для этого элемента. Это продолжается до тех пор, пока не будет достигнут листовой узел 4 . Соседние узлы. Затем проверяется существует ли соседний узел, находящийся на одном уровне. Если таковой элемент существует, React Fiber проходит через одноуровневое поддерево до конечного элемента. Возврат. если соседнего узла нет, React Fiber возвращается к узлу-родителю. Каждый fiber узел имеет в своем объекте такие свойства, как children (массив дочерних узлов, либо null, если таковых нет), sibling (массив соседних узлов либо null) и 4 Листовой узел – узел, не имеющий дочерних элементов. 847 Научный журнал «Инновации. Наука. Образование» Индексация в РИНЦ н Инновации. Наука. Образование parent (родительский узел). Эти свойства используются для работы данного алгоритма в виде односвязного списка. При первичном рендеринге React Fiber создает первый экземпляр current дерева, создавая для каждого React элемента свой собственный экземпляр fiber. Затем, при обновлении графического интерфейса (например, клик пользователя по кнопке), создается workInProgress дерево. Происходит обход дерева по указанному выше алгоритму, но, в отличие от первичного рендеринга, React не создает каждый раз новые экземпляры fiber для старых элементов. Он просто использует уже существующий экземпляр элемента и объединяет новые данные с прежними. Это возможно благодаря уникальным ключам в каждом экземпляре fiber. Ранее, в React версии 15 и ниже, согласователь деревьев был синхронным. Таким образом, при каждом новом рендеринге React Fiber будет рекурсивно проходить по всему дереву и создавать полную копию дерева. Предположим, во время выполнения рекурсивного обхода нового дерева, происходит новое действие пользователя, имеющее более высокий приоритет, чем текущее. По причине того, что прежний алгоритм был синхронным, то не было возможности прервать или приостановить предыдущий рендеринг и выполнить более приоритетное обновление. React Fiber делит рендеринг на малые операции. Он может назначать приоритет каждой операции и имеет возможность приостанавливать, повторно использовать или прерывать операции. Данные малые операции и называются fiber (волокна). React планирует работу на несколько следующих кадров и использует функцию requestIdleCallback. Каждая операция имеет свой приоритет. Например, пользовательский ввод имеет более высокий приоритет, чем рендеринг списка элементов вне области видимости пользователя. React Fiber использует requestAnimationFrame для обновлений с более высоким приоритетом и requestIdleCallback для обновлений с более низким приоритетом. Из вышеописанного следует, что при планировании работы React Fiber проверяет приоритет текущей операции и дедлайн из функции requestIdleCallback (свободное время после окончания операции). React Fiber может планировать несколько операций после одного кадра, если приоритет этих операций выше, чем у ожидающей операции, или если дедлайн не установлен или еще не наступил. Следовательно, ожидающие задачи переносятся на последующие кадры. Структура связанного списка позволяет вставлять новые элементы 848 Научный журнал «Инновации. Наука. Образование» Индексация в РИНЦ н жүктеу/скачать 22,11 Mb. Достарыңызбен бөлісу:
|