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

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

Источник

1 ответ

Решение

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

# 1 Облегчить получение более низкого времени на интерактив

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

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

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

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

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

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

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

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

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