Первоначально опубликовано: 16 сентября 2018 г.

Благодаря таким инструментам, как Webpack, теперь мы можем динамически импортировать модули в наш код. Это также отлично подходит для разделения кода и уменьшения размера наших пакетов.

Это всего лишь краткий пример с использованием установки create-response-app и базовой настройки ComponentA и ComponentB .

Пример кода

Ключевое действие в этом примере происходит в ComponentA с использованием метода жизненного цикла React componentDidMount, где вы видите, что я динамически импорт ComponentB. При этом этот импорт можно использовать где угодно, когда это необходимо. Вы можете динамически запрашивать модули после определенных событий, если хотите.

Вот полный пример кода ComponentA динамически важного ComponentB, устанавливающий его в локальное состояние, а затем - если это переменная локального состояния не нулевая - отображается во время метода жизненного цикла render:

Исходное сообщение: https://www.dennisokeeffe.com/blog/react-dynamic-imports

Здравствуйте - это серия коротких ярких примеров. Прочтите эту серию, чтобы найти маленькие жемчужины для добавления в свой набор инструментов.