preinit
preinit を使用して、スタイルシートや外部スクリプトを事前にフェッチして評価することができます。
preinit("https://example.com/script.js", {as: "style"});リファレンス
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>
);
}