Что такое fiber react
Медленнее, плавнее: разбираемся с React Fiber
16 сентября 2017 года вышла React Fiber — новая мажорная версия библиотеки. Помимо добавления новых фич, о которых вы можете почитать здесь, разработчики переписали архитектуру ядра библиотеки. Я как React-разработчик решил разобраться, что за зверь этот Fiber, какие задачи он решает, за счёт чего и как в итоге можно применить полученные знания на проектах, над которыми я тружусь в компании Live Typing. Разобрался и пришёл к неоднозначным выводам.
Stack против Fiber
Чтобы понять, что поменяли в новой архитектуре, нужно разобраться в недостатках старой. Для примера рассмотрим следующее демо:
У нас имеется два компонента, исходный код которых вы можете посмотреть здесь Первый компонент работает на старой версии архитектуры, которая называлась Stack, второй — с помощью Fiber. Разница заметна невооруженным глазом: анимация второго компонента работает значительно плавнее анимации первого.
За счёт чего возникает задержка анимации компонента, реализованного на Stack? Давайте откроем вкладку Performance в браузере и посмотрим на поле Frames, а также на время выполнения функции SierpinskiTriangle (под ней мы подразумеваем выполнение метода render компонента SierpinskiTriangle). В этой функции происходит процесс сравнения старого и нового виртуального дерева. От того, насколько быстро выполняется этот процесс, зависит частота смены кадра. В данном случае она равняется 700 ms, и это долго.
Рисунок 1. Работа компонента на ядре Stack
Отсюда мы можем сделать вывод, что основной проблемой старой архитектуры было долгое выполнение метода render компонента SierpinskiTriangle. Ускорить его за счёт какой-то оптимизации самого алгоритма вряд ли удалось бы.
Рисунок 2 иллюстрирует, как React на ядре Fiber отрисовывает компонент. Мы видим, что кадры меняются с частотой один раз в 17 ms. Грубо говоря, Fiber каким-то образом разбивает функцию, которая выполняется долго, на небольшие функции, которые выполняются быстро.
Рисунок 2. Работа компонента на ядре Fiber
Fiber в теории
Как Fiber дробит функцию на части? Для этого необходимо управлять процессом выполнения этой функции, а также предоставлять возможность:
Для реализации вышеперечисленного нам необходимо определить, как разделить работу по сравнению старого и нового DOM деревьев на части.
Если посмотреть на React, то все компоненты в нём являются функциями. А отрисовка React-приложения — это рекурсивный вызов функций от самого младшего компонента до старшего. Мы уже видели, что, если функция изменения нашего компонента долго отрабатывает, то возникает задержка. Для решения данной проблемы мы можем воспользоваться двумя методами, которые предоставляю браузеры:
В итоге план такой: нам нужно просчитать часть изменения нашего интерфейса по событию requestIdleCallback, и, как только мы будем готовы отрисовать компонент, запросить requestAnimationFrame, в котором это произойдёт. Но всё ещё необходимо как-то прервать выполнение функции сравнения виртуальных деревьев и при этом сохранять промежуточные результаты. Для решения этой проблемы разработчики React решили разработать свою версию стека вызовов. Тогда у них будет возможность останавливать выполнение функций, самостоятельно давать приоритет выполнения функциям, которым он больше необходим, и так далее.
Реимплементации стека вызовов в рамках React-компонентов и есть новый алгоритм Fiber. Преимущество реимплементации стека вызовов в том, что вы можете хранить его в памяти, останавливать и запускать тогда, когда вам это необходимо.
Fiber на практике: поиск числа Фибоначчи
Стандартная реализация поиска
Реализацию поиска числа Фибоначчи с использованием стандартного стека вызовов можно увидеть ниже.
Сначала разберём, как выполняется функция поиска числа Фибоначчи на обычном стеке вызовов. В качестве примера будем искать третье число.
Итак, в стеке вызовов создаётся кадр стека, в котором будут храниться локальные переменные и аргументы функции. В данном случае кадр стека изначально будет выглядеть таким образом:
Т.к. n > 2, то мы дойдем до следующей строки:
Здесь вновь будет вызвана функция fib. Создастся новый кадр стека, но n будет уже на единицу меньше, то есть 2. Локальные переменные всё так же будут undefined.
И т.к. n=2, то функция возвращает единицу, а мы возвращаемся обратно на строку 5
Стек вызовов выглядит так:
Далее вызывается функция поиска числа Фибоначчи для переменной b, строка 6. Создаётся новый кадр стека:
Функция, как и в предыдущем случае, возвращает 1.
Кадр стека выглядит так:
После чего функция возвращает сумму a и b.
Реализация поиска на Fiber
Дисклеймер: В данном случае у нас показано, как исполняется поиск числа Фибоначчи с реимплементацией стека вызовов. Похожим способ реализован Fiber.
Изначально у нас создается переменная fiber, который в нашем случае является кадром стека. arg — аргумент нашей функции, returnAddr — адрес возврата, a — значение функции.
Т.к. fiber.arg в нашем случае равен 3, что больше 2, то мы переходим на строку 17,
где у нас создаётся новый fiber (кадр стека). В нём мы сохраняем ссылку на предыдущий кадр стека, аргумент на единицу меньше и начальное значение нашего результата. Таким образом, мы воссоздаём стек вызовов, который у нас создавался при рекурсивном вызове обычной функции поиска числа Фибоначчи.
После чего мы в обратную сторону итерируемся по нашему стеку и считаем наше число Фибоначчи. строки 7-15.
Вывод
Стал ли быстрее React после внедрения Fiber? Согласно этому тесту — нет. Он стал даже медленнее примерно в 1,5 раза. Но внедрение новой архитектуры дало возможность рациональнее пользоваться главным потоком браузера, за счёт чего работа анимаций стала плавнее.
Русские Блоги
Понимание архитектуры React Fiber
Понимание архитектуры React Fiber
React Fiber is an ongoing reimplementation of React’s core algorithm. It is the culmination of over two years of research by the React team.
The goal of React Fiber is to increase its suitability for areas like animation, layout,and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
Other key features include the ability to pause, abort, or reuse work as new updates come in; the ability to assign priority to different types of updates; and new concurrency primitives.
Другие основные функции включают в себя возможность приостанавливать, приостанавливать или повторно использовать работу во время обновления, возможность назначать приоритеты для различных типов обновлений и новые примитивы параллелизма.
Логика рендеринга компонентов до React16
Давайте посмотрим на жизненный цикл рендеринга компонентов React:
В предыдущей версии, если вы реализуете очень сложный глубоко вложенный составной компонент, произойдет следующее:
Существующие иерархические отношения выглядят следующим образом:
Последовательность жизненного цикла, вызываемая при рендеринге компонента:
На приведенном выше рисунке показана последовательность визуализации жизненного цикла вызовов фазы монтирования для A, B, C и D. Вы можете видеть, что каждый жизненный цикл вызывается из компонента верхнего уровня и идет вниз до тех пор, пока не будет вызван жизненный цикл подкомпонента нижнего уровня. Потом позвони снова.
То же самое касается фазы обновления компонентов.
После монтирования компонента, если данные (состояние) самого верхнего компонента изменены, стек вызовов при обновлении компонента:
Появление React Fiber
React Fiber был создан для решения вышеуказанных проблем.
Подобно водолазу, когда он погружается в воду, он должен плыть до самого низкого уровня, пока не найдет самый низкий компонент, а затем он выходит на берег.В течение этого периода все, что происходит на берегу, не может ему помешать. Если ему нужно сделать более важные вещи (например, действия пользователя), он также должен дождаться его приземления.
Для того, чтобы различать приоритеты, React имеет свой собственный набор логики. Для вещей с высокой производительностью в реальном времени, таких как анимация, то есть, если вы должны выполнить рендеринг один раз в 16 мс, чтобы гарантировать, что он не зависнет, React будет приостанавливать обновление каждые 16 мс (в пределах) и возвращаться для продолжения рендеринга анимации.
Архитектура React Fiber
Разделите планирование на небольшие задачи
Сам браузер постоянно развивается.По мере того как страница переходит от простого отображения к WebAPP, ему требуются некоторые новые возможности для переноса большего количества отображений узлов и обновлений.
Вот некоторые меры самопомощи:
React официально используетrequestIdleCallback, Чтобы быть совместимым со всеми платформами, facebook реализовал свои функции отдельно, как независимый пакет npm, используя response-schedule.
Его функция заключается в последовательном вызове функций во время периода простоя браузера, который может выполнять фоновые или низкоприоритетные задачи в основном цикле событий, не влияя на отложенный запуск и критические события, такие как анимация и взаимодействие с пользователем. Функции обычно выполняются в порядке первого вызова, если функция не достигает своего тайм-аута до того, как браузер ее вызовет.
Упрощенная блок-схема выглядит следующим образом:
Волоконный узел и волоконное дерево
Два этапа: reconciliation с commit
процесс примирения
1 Если текущий узел обновлять не нужно, клонируйте дочерний узел напрямую и отметьте тип обновления, если вы хотите обновить
2 Обновите текущее состояние узла (свойства, состояние, контекст и т. д.)
3 вызвать shouldComponentUpdate ()
4 Вызовите метод экземпляра компонента render (), чтобы получить новый дочерний узел, и создайте Fiber Node для дочернего узла (процесс создания будет повторно использовать существующий Fiber Node в максимально возможной степени, и здесь также происходит добавление и удаление дочерних узлов. )
5 Если дочернее волокно не сгенерировано, введите следующую фазу completeUnitOfWork
Жизненный цикл состоит из двух фаз:
ReconciliationСтадия (Алгоритм React, используемый для сравнения двух деревьев, чтобы определить, какие части необходимо повторно отрендерить.）
CommitСтадия (Используется для представления изменений данных в приложениях React. как правило setState результат. В конечном итоге приведет к повторному рендерингу.）
Потому как reconciliation Этап может быть прерван, поэтому reconciliation Функции жизненного цикла, которые будут выполняться на этапе, могут вызываться несколько раз, что вызывает ошибки. Таким образом, для reconciliation Несколько функций, вызываемых в сцене, кроме shouldComponentUpdate Помимо этого, других следует избегать, и для решения этой проблемы в React16 был введен новый API.
getDerivedStateFromProps Заменил оригинал componentWillMount против componentWillReceiveProps Метод, который будет вызываться при инициализации и обновлении компонента.
Таким образом, весь процесс выглядит так: (цитируя изображение @ )
Предложения по использованию функции жизненного цикла React16
В сочетании с архитектурой React Fiber рекомендуется использовать жизненный цикл реакции следующим образом.
Основное обновление 16-й версии также устраняет следующие болевые точки:
Русские Блоги
В течение 2 лет компания разрабатывала реагирование на нативном уровне. Когда он используется в середине, он сталкивается с множеством сложных проблем. Преследование часто связано с проблемой механизма RN. Надежды на RN возродились, и было прочитано много информации, чтобы сделать некоторые выводы.
I. Фон
Основная цель: расширить егоприменимостьВключая анимацию, макет и жесты. Разделены на 5 конкретных целей (последние 2 рассчитаны):
Разбейте прерываемую работу на небольшие задачи
Расставьте приоритеты в работе, повторите и повторно используйте последние (наполовину выполненные) результаты
Возврат вперед и назад между родительскими и дочерними задачами для поддержки обновления макета во время выполнения React
поддержка render() Вернуть несколько элементов
Лучшая поддержка границы ошибок
Поскольку первоначальное намерение не состояло в том, чтобы выполнять JS без контроля в течение длительного времени (планировалось вручную), почему долгосрочное выполнение JS влияет на интерактивный ответ и анимацию?
Поскольку JavaScript выполняется в основном потоке браузера, он работает с расчетами стилей, макетами и во многих случаях с рисованием. Если JavaScript выполняется слишком долго, он блокирует эти другие задачи и может привести к пропущенным кадрам.
React надеется изменить этот неконтролируемый статус-кво с помощью рефакторинга Fiber и еще больше улучшить интерактивность
P.S. Для получения дополнительной информации о целях волокна, проверьтеCodebase Overview
Ключевые особенности
Основные характеристики волокна:
Инкрементальный рендеринг (разбить задачу рендеринга на блоки и распределить их по нескольким кадрам)
Возможность приостановить, прекратить и повторно использовать задачи рендеринга при обновлении
Приоритетность различных типов обновлений
Новые базовые возможности в параллелизме
Инкрементальный рендеринг используется для решения проблемы пропущенных кадров.После того, как задача рендеринга разбита, за один раз выполняется только небольшой сегмент, а контроль времени возвращается в основной поток после завершения сегмента, в отличие от длительного заполнения. Эта стратегия называется совместным планированием, который является одной из трех стратегий планирования задач операционной системы (Firefox также применяет эту технологию к реальному DOM)
Кроме того, собственный Reactkiller featureВиртуальный DOM по 2 причинам:
Интерфейс кодирования становится проще (не заботьтесь о том, что должен делать браузер, но опишите следующий интерфейс для реакции)
Поскольку DOM может быть виртуальным, все остальное (аппаратное обеспечение, VR, собственное приложение) может
Реализация реализации делится на 2 части:
Reconciler находит различия между двумя версиями пользовательского интерфейса до и после определенного момента. Включая предыдущий согласователь стека и текущий согласователь оптоволокна
Renderer Pluggable, зависимая от платформы часть. Включая React DOM, React Native, React ART, ReactHardware, ReactAframe, React-pdf, ReactThreeRenderer, ReactBlessed и т. Д.
Эта волна представляет собой полное преобразование примирителя и улучшение функции убийцы
Три. Волокно и волокнистое дерево
Существует 3 экземпляра среды выполнения React:
Экземпляры создаются на основе элементов, абстрактного представления компонентов и узлов DOM.Дерево vDOM поддерживает состояние компонента и отношения между компонентом и деревом DOM.
Дерево vDOM создается во время первого рендеринга, а когда его нужно обновить позже ( setState() ), Дерево Diff vDOM получает изменение DOM и применяет изменение DOM к дереву DOM
Реконкурсор до Fibre (известный как Реконсификатор стека) рекурсивный нисходящий mount/update ，Не может быть прервана(Постоянно занимая основной поток), так что периодические задачи, такие как макеты, анимация и интерактивные ответы в основном потоке, не могут быть обработаны немедленно, что влияет на восприятие
Волокно решает эту проблемумышлениеОн состоит в том, чтобы разделить процесс рендеринга / обновления (рекурсивный анализ) на серию небольших задач, каждый раз проверять небольшую часть дерева и завершать, чтобы увидеть, есть ли еще время для продолжения следующей задачи, если есть, продолжить, если нет, приостановить себя. И продолжить, когда основной поток не занят
Для инкрементных обновлений требуется больше контекстной информации. Предыдущее дерево vDOM было явно трудно встретить, поэтому оно было расширеноfiber tree(То есть дерево vDOM контекста Fiber), процесс обновления заключается в создании нового дерева волокон (дерева workInProgress) в соответствии с входными данными и существующим деревом волокон. Поэтому слой Instance добавляет эти экземпляры:
Примечание. Два слоя, размещенные на пунктирной линии, являются временными структурами, которые полезны только для обновления и не поддерживаются ежедневно.effectОтносится к побочному эффекту, включая изменение DOM
Основная структура каждого узла в дереве волокон (каждый узел называетсяfiber) Следующим образом:
return Указывает, кто должен представить свой собственный список эффектов после обработки текущего узла
Дерево P.S.fiber на самом деле представляет собой структуру дерева с одним связанным списком, см.react/packages/react-reconciler/src/ReactFiber.js
P.S. Обратите внимание на маленькое волокно и большое волокно: первое представляет узлы на дереве волокон, а второе представляет React Fiber.
Four.Fiber Reconiler
Процесс согласования делится на 2 этапа:
(Прерываемый) рендеринга / согласования получить изменения путем построения дерева workInProgress
(Непрерывный) коммит применить эти изменения DOM
render/reconciliation
На основе волоконного дерева каждое волокно рассматривается как единица работы, и оно строится узел за узлом сверху внизworkInProgress tree(Новое волокно в стадии строительства)
Конкретный процесс выглядит следующим образом (на примере узла компонента):
Если текущий узел не нуждается в обновлении, клонируйте дочерний узел напрямую и перейдите к 5, если вы хотите обновить, отметьте его
Обновить текущий статус узла ( props, state, context И так далее)
вызов shouldComponentUpdate() ， false Если да, перейдите к 5.
вызов render() Получите новые дочерние узлы и создайте волокна для дочерних узлов (процесс создания будет максимально использовать существующие волокна, и здесь также происходят добавления и удаления дочерних узлов)
Если дочернее волокно не генерируется, единица работы заканчивается, список эффектов объединяется с возвращаемым, и в качестве следующей единицы работы используется родственный элемент текущего узла, в противном случае дочерняя структура используется в качестве следующей единицы работы.
Если оставшегося свободного времени нет, подождите, пока в следующий раз основной поток простаивает, прежде чем приступить к следующей единице работы, иначе начните немедленно
Если нет следующего рабочего блока (возвращенного корневому узлу дерева workInProgress), первый этап заканчивается и переходит в состояние pendingCommit.
Поэтому процесс построения дерева workInProgress представляет собой процесс сравнения. requestIdleCallback Чтобы запланировать и выполнить группу задач, вернитесь, чтобы увидеть, есть ли очередь (более срочная) после завершения каждой задачи, и верните контроль времени в основной поток после завершения группы задач до следующей requestIdleCallback Перезвоните и продолжайте строить дерево workInProgress
Reconciler до P.S.Fiber называется Reckciler Stack, поскольку информация о контексте планирования сохраняется системным стеком. Несмотря на то, что это было сделано сразу, подчеркивая, что стек не имеет смысла, это название просто для того, чтобы отличить Fiber Reconciler
Уведомите основную ветку и попросите меня сказать, когда я не занят, у меня есть несколько поводов для беспокойства
Конкретное использование выглядит следующим образом:
Обратите внимание， requestIdleCallback Планирование просто надеется на беспроблемный опыт и не гарантирует абсолютно ничего, например:
Если вы делаете что-то (что соответствует функциям жизненного цикла в React, которые не контролируются React во времени), это занимает 300 мс, и ни один механизм не может гарантировать плавность.
P.S. Обычно оставшееся доступное время составляет 10-50 мс, и пространство планирования не очень богато.
commit
Завершите второй этап на одном дыхании:
Обработка списка эффектов (включая 3 типа обработки: обновление дерева DOM, вызов функций жизненного цикла компонента и обновление внутренних состояний, таких как ref)
Сопряжение завершено, фаза 2 завершена, и все обновления фиксируются в дереве DOM.
Обратите внимание, это действительно такСделано на одном дыхании(Одновременное выполнение не может быть остановлено), фактическая рабочая нагрузка на этом этапе относительно велика, поэтому старайтесь не выполнять тяжелую работу за последние 3 функции жизненного цикла
Крюк жизненного цикла
Функция жизненного цикла также делится на 2 фазы:
Функция жизненного цикла стадии 1 может бытьНесколько звонковПо умолчанию для выполнения с низким приоритетом (один из шести приоритетов, описанных ниже), если прервано задачей с высоким приоритетом, повторно выполнить его позже
V. Волокнистое дерево и дерево работ
Двойная буферизация, в частности, относится к завершению дерева workInProgress, и получается новое дерево волокон, а затем новое и старое (наведите текущий указатель на дерево workInProgress и отбросьте старое дерево волокон).
Возможность повторного использования внутренних объектов (волокна)
Экономьте время для выделения памяти и GC
По одному на каждое волокно alternate Атрибут также указывает на волокно, которое преимущественно используется при создании узла workInProgress alternate Если нет, создайте его:
Как указано в комментариях, fiber и workInProgress содержат ссылки друг на друга. После «любви к новому и ненависти к старому» старое волокно обновляется как новое волокно.Зарезервировать местоДля достижения цели повторного использования волокна экземпляр
В исходном коде P.S. есть несколько интересных трюков, таких какБитовые операции с тегами
Шесть. Приоритетная стратегия
Для каждой единицы работы есть 6 приоритетов:
синхронный То же самое, что и предыдущая операция по согласованию стека, выполняется синхронно
задание выполнено перед следующей галочкой
анимация выполняется до следующего кадра
высокая немедленная казнь в ближайшее время
низкое слегка задержанное (100-200 мс) выполнение в порядке
вне экрана выполняется только при следующем рендере или прокрутке
Высокий приоритет, такой как ввод с клавиатуры (надеюсь получить немедленную обратную связь), низкий приоритет, такой как сетевые запросы, появление комментариев и т. Д. Кроме того,Срочные события позволяют постричься
Такой приоритетный механизм существует2 вопроса：
Как выполняется функция жизненного цикла (может часто прерываться): последовательность запуска и количество раз не гарантируются
голодание (низкоприоритетное голодание): если есть много высокоприоритетных задач, то низкоприоритетные задачи вообще не имеют шансов выполнить (голодать до смерти)
Официальный пример проблемы с функцией жизненного цикла:
Первая проблема решается (еще не решена). Проблема жизненного цикла разрушит некоторые существующие приложения и создаст трудности для плавного обновления. Команда Fiber усердно работает над поиском элегантного пути обновления.
Вторая проблема облегчается повторным использованием работы там, где это возможно, и, похоже, мы пытаемся ее решить.
Эти две проблемы нелегко решить самостоятельно, но только в какой степени. Например, первая проблема, если функция жизненного цикла компонента дополняется слишком большим количеством побочных эффектов, не существует способа ее безвредного решения. Хотя эти проблемы будут оказывать определенное сопротивление обновлению Fiber, они ни в коем случае не являются неразрешимыми (отступите, если новые функции будут достаточно привлекательными, первая проблема будет решена всеми)
Семерка. Резюме
Известный
Реакция не применима в сценариях, где требуется отзывчивый опыт, такой как анимация, макет и жесты
Основная причина заключается в том, что, как только процесс рендеринга / обновления не может быть прерван, он продолжает занимать основной поток.Основной поток занят выполнением JS и не имеет времени следить за ним (компоновка, анимация), что приводит к плохим результатам, таким как пропущенные кадры, задержка ответа (даже отсутствие ответа)
умолять
Механизм, который может полностью разрешить долгосрочное занятие основного потока, может не только решить насущную проблему, но и иметь долгосрочное значение
The “fiber” reconciler is a new effort aiming to resolve the problems inherent in the stack reconciler and fix a few long-standing issues.
решение
Разделите процесс рендеринга / обновления на небольшие задачи и контролируйте время с помощью разумного механизма планирования (более детальный и более сильный контроль)
Затем столкнитесь с 5 подзадачами:
1. Что снести? Что нельзя разобрать?
Разделите процесс рендеринга / обновления на 2 этапа (diff + patch):
Этап исправления применяет все изменения DOM в этом обновлении к дереву DOM, которое представляет собой серию операций DOM. Хотя эти операции DOM также могут быть разделены (выполняются согласно списку изменений одна за другой), это может привести к тому, что фактическое состояние DOM будет несовместимым с внутренним состоянием обслуживания, и это также повлияет на восприятие. Более того, при нормальных сценариях обновление DOM занимает меньше времени, чем функции diff и жизненного цикла, и значимость разделения незначительна.
Следовательно, работа на этапе рендеринга / согласования (diff) может быть разделена, а работа на этапе фиксации (patch) не может быть разделена.
P.S.diff и сверка соответствуют только друг другу и не эквивалентны. Если необходимо различать, сверка включает diff:
This is a part of the process that React calls reconciliation which starts when you call ReactDOM.render() or setState(). By the end of the reconciliation, React knows the result DOM tree, and a renderer like react-dom or react-native applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
Давайте начнем с нескольких разделенных решений:
Разберите в соответствии со структурой компонентов. Плохие оценки, невозможно оценить нагрузку на каждое обновление компонента
Разберите в соответствии с фактическим процессом. Такие как getNextState(), shouldUpdate(), updateState(), checkChildren() Перемежается с некоторыми функциями жизненного цикла
Это слишком грубо, чтобы разобрать по компонентам, что явно не справедливо для больших компонентов. Разборка в соответствии с процедурами является слишком подробной, слишком много задач, частое планирование не является экономически эффективным. Так есть ли подходящий сплит-блок?
Следовательно, на самом деле это гранулярное разбиение узла vDOM (с использованием волокна в качестве единицы работы). Каждый экземпляр компонента и экземпляр каждого абстрактного представления узла DOM является единицей работы. В рабочем цикле обрабатывается одно волокно за раз, и весь рабочий цикл может быть прерван / приостановлен.
3. Как планировать задачи?
Разделен на 2 части:
shouldYield Просто чтобы посмотреть, истекло ли время idleDeadline.timeRemaining() ), Если оно не израсходовано, продолжайте обрабатывать следующую задачу, оно заканчивается, когда оно израсходовано, возвращает контроль времени в основной поток и ожидает следующего раза requestIdleCallback Затем обратный вызов продолжается:
Приоритетные механизмы используются для обработки аварийных ситуаций и последовательности оптимизации, таких как:
Пришло время совершить, поднять приоритет
Половина качественных заданий неверна, отдавайте им более низкий приоритет.
Потратьте время, чтобы обратить внимание на задачи с низким приоритетом, не умирайте с голоду
Если соответствующий узел DOM в данный момент не виден, присвойте ему самый низкий приоритет
Эти стратегии используются для динамической настройки планирования задач, которое является рабочим циклом.Вспомогательный механизм, Сначала сделай самое главное
4. Как прервать / восстановить точку останова?
Прерывание: проверьте единицу работы, обрабатываемую в данный момент, сохраните текущие результаты ( firstEffect, lastEffect ), Измените тег, быстро закройте и откройте другой requestIdleCallback В следующий раз у меня есть шанс
Восстановление точки останова: при следующей обработке единицы работы посмотрите, что тег является прерванной задачей, а затем выполните неполную часть или повторите
P.S. одинаков для механизма прерывания, будь то длительное «естественное» прерывание или грубое прерывание высококачественными задачами
5. Как собрать результаты задания?
Рабочий цикл выверки оптоволокна выглядит следующим образом:
Найдите дерево workInProgress с наивысшим приоритетом корневого узла и возьмите ожидающий узел (представляющий компонент или узел DOM).
Проверьте, нужно ли обновлять текущий узел, если нет, перейдите непосредственно к 4
Пометить (пометить), обновить себя (обновление компонента props ， context Подождите, узел DOM записывает изменение DOM) и генерирует узел workInProgress для дочернего элемента
Если дочерние узлы не создаются, объедините список эффектов (включая изменения DOM) с родительским.
Возьмите ребенка или брата в качестве ожидающего узла и подготовьтесь к следующему рабочему циклу. Если нет ожидающих узлов (возврат к корневому узлу дерева workInProgress), рабочий цикл заканчивается
В конце каждого узла обновлениеСписок эффектов слияния вверхЧтобы собрать результаты задачи.После завершения сверки все побочные эффекты, включая изменение DOM, записываются в список эффектов корневого узла.
Учитесь по аналогии
Теперь, когда задачи можно разделить (если вы, наконец, получите полный список эффектов), разрешитеПараллельное исполнение(Развертывание нескольких волокон + несколько рабочих), первый экран также легче загружать / отображать в блоках (лес vDOM)
Говорят, что при параллельном рендеринге результаты теста Firefox показывают, что страница 130 мс может быть заполнена за 30 мс, поэтому стоит с нетерпением этого ожидать, и React готов, что часто можно услышать в контексте React FiberunlockОдна из дополнительных функций
Краткий анализ исходного кода
С 15 до 16 структура исходного кода сильно изменилась:
Больше никогда не увижу mountComponent/updateComponent() Был разделен и реорганизован в ( beginWork/completeWork/commitWork() ）
ReactDOMComponentОн также был удален.В системе Fiber используется абстракция узла DOM.ReactDOMFiberComponentУказывает, что компонент используетсяReactFiberClassComponentОзначает, что раньшеReactCompositeComponent
Основной механизм системы Fiber отвечает за планирование задачReactFiberScheduler, Эквивалентный предыдущемуReactReconciler
Дерево vDOM превратилось в волокнистое дерево. Раньше оно представляло собой простую нисходящую древовидную структуру. Теперь оно основано на структуре дерева списков с одной связью и поддерживает больше связей узлов.
Посмотрите на дерево волокон:
На самом деле подумайте об этом немного, от стека Reconciler до Fibre ReconilerРекурсивный цикл(Конечно, реальная вещь гораздо больше, чем рекурсивное изменение цикла, но это первый шаг)
Короче говоря, исходный код сильно изменился. Если вы заранее не знаете идею Fiber, вы можете сравнить исходный код.трудно(Если вы посмотрите на исходный код React [15-], вам будет легче запутаться)
Интеллектуальная рекомендация
Совместное использование сухих товаров GitHub (высокая степень интеграции страницы руководства APP-DHGuidePageHUD)
Каждое приложение будет использовать страницу руководства APP, которая не важна, но обязательна. Будь то первая установка приложения или обновление версии, это единственное, что будет показано пользов.
Организуйте некоторые элементы управления диаграммами, которые можно использовать в веб-разработке, в основном для клиентских реализаций, таких как Flash, JavaScript, Silverlight; если для создания ст.