Что Такое React Fiber? React.js Глубокое погружение #2

• Fiber в React - это обычный объект JavaScript с некоторыми свойствами.  

• Fiber Reconciler используется по умолчанию с версии React 16.  

• Fiber фокусируется на анимации и быстродействии, позволяя разбивать работу на части и расставлять приоритеты.  

• Старый Reconciler Stack был синхронным и работал как стек.  

• Пример с текстовым полем показывает, что стек не мог обрабатывать элементы одновременно.  

• Fiber решает эти проблемы, делая React более умным и производительным.  

• Fiber - это единица работы, обрабатываемая React.  

• Процесс состоит из двух этапов: рендеринга и фиксации.  

• На этапе рендеринга React выполняет асинхронные действия, а на этапе фиксации - синхронные.  

• Fiber всегда имеет взаимно однозначную связь с чем-либо.  

• Свойство tag хранит тип объекта, а свойство state node - ссылку на состояние.  

• Fiber часто создаются из элементов React и используются повторно.  

• Fiber образуют дерево, где ребенок указывает на первого ребенка.  

• Брат или сестра указывает на другие волокна, а return - на родительский элемент.  

• Дерево Fiber состоит из соединенных волокон, представляющих элементы React.  

• Работа в React включает изменение состояния, вызов функций жизненного цикла и обновления DOM.  

• Fiber позволяет разбивать работу на части и планировать ее выполнение.  

• React использует функции request animation frame и request idle callback для планирования работы.  

• Текущее дерево - это то, что находится на экране, а незавершенное дерево - это то, что будет на экране.  

• React меняет местами указатели между текущим и незавершенным деревом на этапе фиксации.  

• Это позволяет избежать несогласованного пользовательского интерфейса.  

• Эффекты - это действия, такие как изменения DOM или вызовы методов жизненного цикла.  

• Эффекты не могут быть выполнены на этапе рендеринга и требуют фиксации.  

• Эффекты сильно зависят от Fiber и могут влиять на другие компоненты.  

• Некоторые методы жизненного цикла вызываются на этапе фиксации, другие - на этапе рендеринга.  

• React применяет эффекты синхронно на этапе фиксации, что приводит к видимым изменениям.  

• Рендеринг определяет, какие узлы нужно вставить, обновить или удалить, и вызывает методы жизненного цикла.  

• Волокна - это единицы работы, обрабатываемые React.  

• React вызывает функции beginwork и complete work для обработки волокон.  

• Начальная работа может вызываться многократно, а завершение работы - один раз.  

• React обрабатывает дерево волокон, начиная с корневого узла и двигаясь вниз и вправо.  

• Завершение работы происходит, когда у узла нет дочерних элементов или братьев и сестер.  

• Пример показывает, как React обрабатывает дерево волокон, завершая работу на корневом узле.  

• После завершения работы вызывается конечное волокно, применяются эффекты и изменения сбрасываются.  

• Это делается с помощью цикла while, известного как рабочий цикл.  

• Волокна имеют множество свойств, но альтернативное свойство указывает на оптоволокно на другом конце пары.  

• Волокна позволяют использовать функции, такие как границы ошибок и приостановка.  

• Границы ошибок действуют как блоки перехвата компонентов.  

• Эти функции пока не включены в стабильную версию, но доступны в экспериментальной версии.  

• Видео охватывает основы React Fiber, но тема сложная.  

• В следующих видео планируется изучение состояния и реквизита, а также работы хуков React.  

• Призыв к подписке и лайкам для будущих видео.