Давайте влюбимся в React Fiber

davajte vlyubimsya v react fiber?v=1656610690

автор Райан Юрканин

0*GOQYA_azJHmi1N0N

TLDR, React Fiber – это внутреннее изменение механизма, позволяющее React нарушать пределы стека вызовов. Его создание позволяет React приостанавливать/начать работу по рендерингу по желанию. Впоследствии пользователи React смогут намекнуть на приоритетность работы.

Пока мы не можем непосредственно взаимодействовать с ним, почему нам это нужно? Потому что это действительно круто!

React before Fiber походил на работу в быстро развивающейся компании без git.

Представьте, что вы в центре огромной функции и вашему начальнику нужно немедленно исправить. Однако вы не можете прекратить работу, поскольку все ваши изменения в одном файле вы обязаны завершить эту работу.

Если бы мы использовали git, мы могли бы передать свою работу в ветку и перейти к ветке быстрого исправления.

Благодаря Fiber React может приостановить и возобновить работу по желанию, чтобы поскорее начать работу над тем, что важно! ?

React Internals в двух словах?

Вы создаете дерево компонентов. React берет дерево, проходит по нему и создает виртуальную модель конечного результата. Возможно, вы воспроизводите DOM, возможно, вы ориентируетесь на родной. На данный момент это не важно для React.

1*LZzl0FxVvinV2zLjqJQeaA
Если вы никогда не использовали React, вот пример дерева компонентов.

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

На этом шаге мы получаем зависимость от платформы. Если вы воспроизводите DOM, возможно, изменился только один класс для одного элемента. React пройдет по виртуальному дереву, найдет что изменилось и обновит как можно меньше.

Это может означать обновление одного атрибута класса или это может означать разрушение всего DOM. Это примирение.

До Fiber это было. Работа была изложена, и выбранный визуализатор приступил к работе. Даже если браузер тормозит, пользователь печатает или планета вот-вот разразится, поезд визуализации не останавливается. ?

Как это работает (на высоком уровне)?

У Fiber теперь есть разные уровни приоритета обновлений. Обновление вводимых данных, которые пользователь вводит, имеет больший приоритет, чем список тысяч компонентов.

Fiber разбивает вычисление дерева на единицы работы, которые оно может «сделать» в любое время. Итак, что же такое единица работы? Это просто узел в вашем дереве компонентов!

  1. Теперь React может приостановить, восстановить и перезапустить работу над компонентом. Это означает, что некоторые хуки жизненного цикла могут запускаться несколько раз.
  2. React может иметь систему обновления на основе приоритетов. Это позволяет команде React точно настроить средство визуализации, чтобы React был самым быстрым в наиболее распространенных случаях использования.

Но я хочу немного сосредоточиться на этом первом пункте. React собирается отходить от (но все еще поддерживать!) некоторых старых крючков жизненного цикла и добавлять новые! ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, теперь может запускаться несколько раз. Вы не должны вызывать побочные эффекты здесь.

Теперь вы хотите запустить побочные эффекты в хуках жизненного цикла, которые будут запускаться только один раз: componentDidMount и componentDidUpdate

Чтобы компенсировать многие случаи использования componentWillReceiveProps закрыты, мы получим два новых крючка.

  1. getDerivedStateFromProps который не имеет доступа к предыдущим реквизитам или экземпляру компонента, но позволяет синхронизировать состояние с вашими реквизитами.
  2. getSnapshotBeforeUpdate дает вам доступ к DOM для его обновления. Возвращаемое значение можно использовать componentDidUpdate.
0*OoDfQ7pzAqg6yETH
Эта диаграмма иллюстрирует, как крючки жизненного цикла работают с React Fiber

Начиная с React 16.4 getDerivedStateFromProps теперь всегда запускается перед методом render. Не только когда реквизит обновляется!

Суммируя, Fibre позволяет React точно настроить рендеринг, чтобы убедиться, что самые важные обновления происходят как можно скорее, все за небольшую стоимость некоторых крючков жизненного цикла и галлоны крови разработчиков Facebook. ?

Если у вас возникли вопросы или вы ищете наставничества с React один на один, пишите мне в Twitter @yurkaninryan никогда!

Если вам нравится мой стиль письма, вот некоторые другие статьи, которые я написал.

Удачи и счастливой кодировки! ??

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *