preinit

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

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

Ссылка

preinit(href, options)

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

import { preinit } from 'react-dom';

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

См. примеры ниже.

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

Параметры

• href: строка. URL ресурса, который вы хотите загрузить и выполнить.
• options: объект. Он содержит следующие свойства:
  • as: обязательная строка. Тип ресурса. Возможные значения: script и style.
  • precedence: строка. Требуется для стиловых листов. Указывает, где вставить стиловый лист относительно других. Стиловые листы с более высоким приоритетом могут переопределять те, у которых он ниже. Возможные значения: reset, low, medium, high.
  • crossOrigin: строка. Политика CORS для использования. Возможные значения: anonymous и use-credentials. Требуется, когда as установлено в "fetch".
  • integrity: строка. Криптографический хэш ресурса для проверки его подлинности.
  • nonce: строка. Криптографический nonce для разрешения ресурса при использовании строгой политики безопасности содержимого.
  • fetchPriority: строка. Предлагает относительный приоритет загрузки ресурса. Возможные значения: auto (по умолчанию), high, и low.

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

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

Ограничения

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

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

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

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

import { preinit } from 'react-dom';

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

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

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

import { preinit } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinit("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}