Есть два варианта использования React Suspense, о которых я знаю (и, наверняка, еще многое узнаю).Обратите внимание, что в ответе ниже, я использую suspense в качестве прагматической ссылки, в действительности есть больше компонентов, которые используются, такие как lazy, react-cache и т. Д.
# 1 Сделайте этопроще получить более низкое время до интерактивного
более низкое время до интерактивного показателя, также известного как показатель TTI , - это способ измерить, насколько быстро ваш сайт чувствует для пользователя.Если вы проверите свои сетевые ресурсы в инструментах разработки браузеров, вы увидите, что очень много времени уходит на ожидание загрузки файла javascript.Даже если он минимизирован и сжат, он не может быть оптимальным.
Например, если вашему веб-сайту в какое-то время требуется библиотека визуализации данных (скажем, Highcharts), если это не первая вещь, которую увидит ваш пользователь, вам не нужно отправлятьэтот компонент визуализации с первым файлом JavaScript.Это значительно сэкономит ваш первоначальный пакет и улучшит показатель TTI.
Это делается с помощью комбинированной магии динамического импорта веб-пакетов, реагирования Lazy и React Suspense (на что указывают документы)
# 2 Обработка обычных случаев извлечения данных
Я думаю, что это все еще в стадии разработки, но я помню, что команда реагирует на это.Если ваш компонент должен получать свои данные с сервера (вызов API), вы увидите некоторые общие проблемы и попытаетесь справиться с ними в некотором объеме:
- Показать индикатор загрузки, если запрос принимаетсяlong
- Что делать, если ваш запрос вышел из строя (границы ошибок делают это за вас сейчас)
- Что если вы хотите кэшировать ваши дорогостоящие сетевые запросы
Этообщие проблемы, и это то, где неизвестность поможет.
Дополнительные ресурсы, которые могут представлять интерес
- Дэн Абрамов выступить на jsConf представляя неизвестность миру.
- Хороший пост на medium , показывающий преимущества разделения кода и влияние на TTI