В чем разница между React и React Fiber?

Question

Я только что услышал, что реагирующее волокно готово. Каковы большие различия между реагирующим и реагирующим волокном? Стоит ли изучать совершенно новую концепцию этих различий?

Answer 1

React Fibre - это постоянная повторная реализация основного алгоритма React, это просто полная внутренняя перезапись React.

React Fiber - это полное, обратно совместимое переписывание ядра React.

Цель React Fiber - повысить его пригодность для таких областей, как анимация, макет и жесты. Его особенность заголовка - инкрементальный рендеринг: возможность разбивать рендеринг на куски и распределять их по нескольким кадрам.

React Fibre - это фрейм виртуального стека, а React Fibre- это переопределение фрейма стека, специализированного для компонентов React. Каждое волокно можно рассматривать как кадр виртуального стека, в котором информация из кадра сохраняется в памяти в куче, а поскольку информация сохраняется в куче, вы можете контролировать и воспроизводить структуры данных и обрабатывать соответствующую информацию по мере необходимости.

Вы можете найти отличное объяснение от Лин Кларк в этом видео.

Для более подробной информации, пожалуйста, проверьте следующие ссылки,

1. Что такое React Fiber?

2. Реагировать на архитектуру волокна

3. Что для вас значит "Реакция 16"?

Надеюсь, это поможет вам!

Answer 2

React Fiber - это постоянная реализация основного алгоритма React. Основное различие между реагирующим и реагирующим волокном заключается в следующих новых функциях:

1. Инкрементальный рендеринг: - React v16.0 включает полностью переписанный сервер рендеринга. Это действительно быстро. Он поддерживает потоковую передачу, поэтому вы можете быстрее отправлять байты клиенту

2. Обработка ошибок в API рендеринга. Чтобы сделать компонент класса границей ошибок, мы определяем новый метод жизненного цикла, который называется componentDidCatch (error, info).

3. Возврат нескольких элементов из рендера: с помощью этой новой функции в React v16.0 теперь мы также можем возвращать массив элементов и строку из метода рендеринга компонента.

4. Порталы: Порталы предоставляют первоклассный способ визуализации дочерних элементов в узле DOM, который существует вне иерархии DOM родительского компонента.

5. Фрагменты. Обычный шаблон в React - компонент возвращает несколько элементов. Фрагменты позволяют группировать список детей без добавления дополнительных узлов в DOM.

Answer 3

Бета-версия React 16 была выпущена несколько часов назад: https://github.com/facebook/react/issues/10294.

Переписанное ядро React (то, что внутренне было названо "волокном") должно оставаться совместимым с существующими приложениями, за исключением нескольких критических изменений (см. Примечания к выпуску на Github). Поскольку большинство изменений находятся под капотом, вам не нужно будет снова изучать совершенно новую концепцию.

Answer 4

Все здесь уже упомянули здесь все новые функции, которые появляются с реагирующим волокном. Я остановлюсь на том, что волокно реагирует на изменение ядра, чтобы улучшить себя. Реактивное волокно фактически позволит приостановить и воспроизвести различные задачи, выполняемые браузером. Он будет отдавать приоритет определенным задачам над другими.

Например, если важна конкретная анимация, а не выборка данных в фоновом режиме. он выдвинет задачу анимации в качестве приоритета в стеке выполнения, и как только анимация будет завершена или займет слишком много времени, можно переключиться на задачу извлечения данных. Чтобы позволить этим современным браузерам открыть API-интерфейс requestIdleCallback, который позволяет приостанавливать и воспроизводить задачи. requestIdleCallback

Это то, что реагирует волокно использует. Это то, что реагирующее волокно использует в капюшоне, и это удивительно.

Примечание: я могу быть не совсем точен в нескольких моментах. Я открыт для любых исправлений, если таковые имеются

Answer 5

Реактивная архитектура волокна

React Fiber - это постоянная реализация основного алгоритма React. Это кульминация более чем двухлетних исследований команды React.

Цель React Fiber - повысить его пригодность для таких областей, как анимация, макет и жесты. Его особенность заголовка - инкрементальный рендеринг: возможность разбивать рендеринг на куски и распределять их по нескольким кадрам.

Другие ключевые функции включают возможность приостанавливать, прерывать или повторно использовать работу при поступлении новых обновлений; возможность назначать приоритет различным типам обновлений; и новые примитивы параллелизма