Научный журнал «Инновации. Наука. Образование» Индексация в ринц н Инновации. Наука. Образование
жүктеу/скачать 22,11 Mb. Pdf көрінісі
|
Номер 51 февраль 2022 года
| Инновации. Наука. Образование
Целью React Fiber является оптимизация работы алгоритма сравнения, а также улучшенный и плавный рендеринг анимации пользовательского интерфейса и повышение отзывчивости взаимодействия с пользователем. Его главной особенностью является инкрементный рендеринг: возможность разделить операции рендеринга на малые части и распределить их по нескольким кадрам. Другие ключевые функции включают возможность приостанавливать, прерывать или повторно использовать работу алгоритма по мере поступления новых обновлений, а также возможность назначать приоритет разным типам обновлений. Также React Fiber позволяет делать возврат нескольких элементов из функции рендеринга, оптимизирует поддержку обработки ошибок (возможность использовать метод componentDidCatch для получения более четких сообщений об ошибках) и порталы 3 . При вычислении новых обновлений рендеринга React Fiber несколько раз обращается к основному потоку. В результате новую высокоприоритетную задачу можно поместить выше старой и низкоприоритетной задачи. Библиотека React имеет уже заданные внутренние приоритеты для каждого типа обновления. Прежде чем продолжить углубление в технические подробности React Fiber, нужно иметь понимание об основных терминах, связанных с новым алгоритмом сравнения: 1. Reconciliation [1] – алгоритм сравнения двух DOM деревьев. Когда графический интерфейс отображается впервые, React создает виртуальное дерево React- элементов, которое является копией реального DOM дерева. После любого изменения в графическом интерфейсе, данный алгоритм рекурсивно сравнивает каждый узел дерева из двух версий виртуального дерева – текущего и нового. Совокупные изменения затем передаются в библиотеку для отрисовки изменений (для веб-приложений – React DOM, для мобильных приложений - React Native); 2. Scheduling [2] (Планирование) – инструмент приоритизации DOM операций. Можно предположить, что имеется DOM операция с низким приоритетом (например, объемная функция на вычисление каких-либо данных или рендеринг недавно полученных данных) и работа с высоким приоритетом (например, анимация). Должна быть возможность поместить высокоприоритетную операцию в очередь над 3 React Portal - способ рендеринга дочерних элементов в узел DOM, который существует вне иерархии DOM родительского компонента. 845 Научный журнал «Инновации. Наука. Образование» Индексация в РИНЦ н жүктеу/скачать 22,11 Mb. Достарыңызбен бөлісу:
|