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 для разрешения ресурса при использовании строгой политики Content Security Policy.
  • fetchPriority: строка. Предполагает относительный приоритет загрузки ресурса. Возможные значения: auto (по умолчанию), high, и low.

Возвращает

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

Ограничения

• Несколько вызовов preinit с одинаковым href эквивалентны одному вызову.
• В браузере вы можете вызвать preinit в любой ситуации: при отрисовке компонента, в эффекте, в обработчике событий и так далее.
• При рендеринге на стороне сервера или при рендеринге серверных компонентов 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>
  );
}