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>
  );
}