preinit¶

Canary

Функция preinit в настоящее время доступна только в каналах React Canary и experimental. Подробнее о каналах выпуска React здесь.

Фреймворки на основе React часто обрабатывают загрузку ресурсов за вас, поэтому вы можете не вызывать этот API самостоятельно. За подробностями обращайтесь к документации вашего фреймворка.

preinit позволяет быстро получить и оценить таблицу стилей или внешний скрипт.

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

Описание¶

`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 в любой ситуации: при рендеринге компонента, в эффекте, в обработчике событий и так далее.
При рендеринге на стороне сервера или при рендеринге серверных компонентов preinit имеет эффект, только если вы вызываете его во время рендеринга компонента или в асинхронном контексте, возникающем при рендеринге компонента. Любые другие вызовы будут проигнорированы.

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

Преинициация при рендеринге¶

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

Примеры предварительного инициирования¶

1. Предварительное инициирование внешнего скрипта

import { preinit } from 'react-dom';

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

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

2. Предварительное инициирование таблицы стилей

import { preinit } from 'react-dom';

function AppRoot() {
    preinit('https://example.com/style.css', {
        as: 'style',
        precedence: 'medium',
    });
    return /* ... */;
}

Опция precedence, которая является обязательной, позволяет вам контролировать порядок следования таблиц стилей в документе. Таблицы стилей с более высоким приоритетом могут отменять те, что имеют более низкий приоритет.

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

Преинициация в обработчике события¶

Вызовите 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>;
}

Источник — https://react.dev/reference/react-dom/preinit