preinit

Canary

preinit 関数は、現在 React の Canary および experimental チャンネルでのみ利用可能です。React のリリースチャンネルについてはこちらをご覧ください。

補足

React ベースのフレームワークは、多くの場合リソースの読み込みを自動で処理してくれるため、この API を直接呼び出す必要はないかもしれません。詳細はフレームワークのドキュメントを参照してください。

preinit を使用して、スタイルシートや外部スクリプトを事前にフェッチして評価することができます。

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

リファレンス
- preinit(href, options)
使用法
- レンダー時の事前初期化
- イベントハンドラ内での事前初期化

リファレンス

`preinit(href, options)`

スクリプトやスタイルシートを事前初期化するためには、react-dom の preinit 関数を呼び出します。

import { preinit } from 'react-dom';

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

さらに例を見る

preinit 関数は、指定されたリソースのダウンロードと実行を開始するようブラウザに対してヒントを与えます。これにより時間を節約できる可能性があります。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 は何も返しません。

注意点

同じ href で preinit を複数回呼び出した場合の効果は、一度のみ呼び出した場合と同様です。
ブラウザからは、コンポーネントのレンダー中、エフェクト内、イベントハンドラ内も含むどんな状況においても preinit の呼び出しが可能です。
サーバサイドレンダリングやサーバコンポーネントのレンダー時には、コンポーネントのレンダー中やレンダーから派生した非同期処理の中で preinit を呼び出した場合にのみ効果があります。それ以外の呼び出しは無視されます。

使用法

レンダー時の事前初期化

コンポーネントをレンダーする際に自身あるいはその子が特定のリソースを使用することが分かっており、かつそのリソースがダウンロードされた直後に評価され効果が現れても問題ないという場合、preinit を呼び出します。

事前初期化の例

例 1/2:
外部スクリプトの事前初期化

import { preinit } from 'react-dom';

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

ブラウザにスクリプトをダウンロードさせたいが、すぐに実行させたくない場合は、代わりに preload を使用してください。ESM モジュールをロードしたい場合は、preinitModule を使用してください。

イベントハンドラ内での事前初期化

外部リソースを必要とするページ遷移や状態遷移を行う前に、イベントハンドラで 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>
  );
}

PreviousprefetchDNS

NextpreinitModule

preinit - This feature is available in the latest Canary