Инновации. Наука. Образование
со сложностью O(1), что является значительно быстрее, по сравнению со вставкой в
деревья или стек. Именно это позволяет React Fiber приостанавливать, повторно
использовать и прерывать операции.
В целом, работу React Fiber можно разделить на две стадии – Render и Commit. В
течение Render стадии происходит фактический обход дерева. Это внутренняя логика
алгоритма по созданию дерева объектов JavaScript, поэтому, изменения, сделанные на
данном этапе не будут видны конечному пользователю в браузере. Именно тут
происходит изменение обновленных fiber элементов, добавление новых, удаление, а также
возможная приостановка и прерывание операций. По результатам Render стадии создается
односвязный список операций эффектов (например, по обновлению, удалению элементов
из DOM дерева, вызов методов жизненного цикла React, хуков React). Fiber элементы,
которые изменились по сравнению с предыдущим рендерингом помечаются
определенным свойством объекта – effectTag, а также они имеют указатель nextEffect,
необходимый для работы односвязного списка.
На стадии Commit начинается рендеринг полученных операций в пользовательском
интерфейсе. Поскольку результат данного этапа будет виден пользователю, его нельзя
разделить на частичные рендеринги, поэтому сюда операции попадают уже в порядке
приоритета. Следовательно, данная стадия уже является синхронной. Именно на данном
этапе workInProgress дерево становится current деревом и React Fiber ожидает новых
действий пользователя для очередного запуска алгоритма сравнения.
Литература:
1.
React.
Reconciliation
[Электронный
ресурс]
Режим
доступа:
https://reactjs.org/docs/reconciliation.html
(дата обращения: 24.01.2022).
2.
React.
Design
Principles
[Электронный ресурс] Режим доступа:
https://reactjs.org/docs/design-principles.html#scheduling
(дата обращения: 24.01.2022).
Достарыңызбен бөлісу: |