Какую проблему пытается решить React Suspense?

#javascript #reactjs #lazy-loading #code-splitting #react-suspense

#javascript #reactjs #отложенная загрузка #разделение кода #react-suspense

Вопрос:

Я видел несколько примеров в reactjs.org , но я хочу знать проблему, которую они пытаются решить, и / или что за магия стоит за этим. И как я могу использовать его в реальных проектах, помимо того, что уже есть в документах react.

1. React.Suspense позволяет указать индикатор загрузки на случай, если некоторые компоненты в дереве под ним еще не готовы к рендерингу . Это довольно хорошее объяснение того, что он делает.

Ответ №1:

Есть два варианта использования React Suspense, о которых я знаю (и уверен, что еще предстоит обнаружить). Пожалуйста, обратите внимание, что в приведенном ниже ответе я использую suspense в качестве прагматической ссылки, на самом деле используется больше компонентов, таких как lazy , react-cache и т.д.

# 1 Упростите получение меньшего времени для интерактивного

Меньшее время перехода к интерактивности, известное как показатель TTI, — это способ измерить, насколько быстро ваш сайт воспринимается пользователем. Если вы проверите свои сетевые ресурсы в инструментах разработки ваших браузеров, вы увидите, что на ожидание загрузки файла javascript тратится очень значительное время. Даже если он уменьшен и сжат, это может быть неоптимально.

Например, если вашему веб-сайту в какой-то момент потребуется библиотека визуализации данных (скажем, Highcharts), если это не первое, что увидит ваш пользователь, вам не нужно отправлять этот компонент визуализации с первым файлом javascript. Это значительно сэкономит размер вашего первоначального пакета и улучшит ваш показатель TTI.

Это делается с помощью комбинированного волшебства динамического импорта webpack, react Lazy и React Suspense (на это указывают документы)

# 2 Обработайте обычные случаи, связанные с выборкой данных

Я думаю, что это все еще продолжается, но я помню, что над этим работает команда react. Если вашему компоненту необходимо получить свои данные с сервера (вызов API), тогда вы увидите некоторые общие проблемы, и вы попытаетесь справиться с ними в некотором качестве:

Показывать индикатор загрузки, если запрос занимает много времени
Что, если ваш запрос завершается с ошибкой (границы ошибок делают это за вас сейчас)
Что, если вы хотите кэшировать свои дорогостоящие сетевые запросы

Это общие проблемы, и именно здесь suspense поможет.

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

Выступление Дэна Абрамова на JSConf о том, что такое саспенс, привносит его в мир.
Хороший пост на medium, показывающий преимущества разделения кода и влияние на TTI