preinitModule

preinitModule("https://example.com/module.js", {as: "script"});

• Справочник
  • preinitModule(href, options)
• Использование
  • Предварительная загрузка при отрисовке
  • Предварительная загрузка в обработчике событий

Справочник

preinitModule(href, options)

Для предварительной инициализации модуля ESM вызовите функцию preinitModule из react-dom.

import { preinitModule } from 'react-dom';

function AppRoot() {
  preinitModule("https://example.com/module.js", {as: "script"});
  // ...
}

См. дополнительные примеры ниже.

Функция preinitModule предоставляет браузеру подсказку о том, что он должен начать загрузку и выполнение данного модуля, что может сэкономить время. Модули, которые вы preinit, выполняются после завершения загрузки.

Параметры

• href: строка. URL модуля, который вы хотите загрузить и выполнить.
• options: объект. Он содержит следующие свойства:
  • as: обязательная строка. Она должна быть 'script'.
  • crossOrigin: строка. Политика CORS для использования. Возможные значения — anonymous и use-credentials.
  • integrity: строка. Криптографическое хэширование модуля для проверки его подлинности.
  • nonce: строка. Криптографический nonce для разрешения модуля при использовании строгой политики Content Security Policy.

Возвращаемое значение

preinitModule ничего не возвращает.

Ограничения

• Несколько вызовов preinitModule с одинаковым href имеют тот же эффект, что и один вызов.
• В браузере вы можете вызвать preinitModule в любой ситуации: во время отрисовки компонента, в эффекте, в обработчике событий и так далее.
• При рендеринге на стороне сервера или при рендеринге Server Components preinitModule оказывает эффект только в том случае, если вы вызываете его при отрисовке компонента или в асинхронном контексте, происходящем от отрисовки компонента. Любые другие вызовы будут проигнорированы.

Использование

Предварительная загрузка при отрисовке

Вызовите preinitModule при отрисовке компонента, если вы знаете, что он или его дочерние элементы будут использовать определённый модуль, и вы готовы к тому, что модуль будет оценён и, следовательно, начнёт действовать сразу же после загрузки.

import { preinitModule } from 'react-dom';

function AppRoot() {
  preinitModule("https://example.com/module.js", {as: "script"});
  return ...;
}

Если вы хотите, чтобы браузер загрузил модуль, но не выполнял его сразу, используйте preloadModule вместо этого. Если вы хотите предварительно инициализировать скрипт, который не является модулем ESM, используйте preinit.

Предварительная загрузка в обработчике событий

Вызовите preinitModule в обработчике событий перед переходом на страницу или состояние, где модуль потребуется. Это запускает процесс раньше, чем если бы вы вызвали его во время отрисовки новой страницы или состояния.

import { preinitModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinitModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}