preinitを使用すると、スタイルシートまたは外部スクリプトを積極的にフェッチして評価できます。
preinit("https://example.com/script.js", {as: "script"});リファレンス
preinit(href, options)
スクリプトまたはスタイルシートを事前初期化するには、react-domからpreinit関数を呼び出します。
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: 文字列。厳格なコンテンツセキュリティポリシーを使用する場合にリソースを許可するための暗号化ノンス。fetchPriority: 文字列。リソースをフェッチするための相対的な優先順位を提案します。可能な値は、auto(デフォルト)、high、およびlowです。
戻り値
preinit は何も返しません。
注意事項 （SVGアイコンは省略）
- 同じ
hrefを指定してpreinitを複数回呼び出すことは、1回呼び出すことと効果は同じです。 - ブラウザでは、
preinitはどのような状況でも呼び出すことができます。コンポーネントのレンダリング中、Effect 内、イベントハンドラ内などです。 - サーバーサイドレンダリングまたはサーバーコンポーネントのレンダリング時には、
preinitは、コンポーネントのレンダリング中またはコンポーネントのレンダリングから発生した非同期コンテキスト内で呼び出した場合にのみ効果があります。その他の呼び出しは無視されます。
使用方法 （SVGアイコンは省略）
レンダリング時の事前初期化 （SVGアイコンは省略）
コンポーネントまたはその子コンポーネントが特定のリソースを使用することがわかっている場合、かつ、リソースがダウンロードされた直後に評価され、有効になることを許容できる場合は、コンポーネントのレンダリング時に preinit を呼び出します。
事前初期化の例（SVGアイコンは省略）
外部スクリプトの事前初期化の例 1（例） 2: 外部スクリプトの事前初期化 （SVGアイコンは省略）
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
return ...;
}ブラウザにスクリプトをダウンロードさせたいが、すぐに実行させたくない場合は、代わりに preload を使用してください。ESMモジュールを読み込みたい場合は、preinitModule を使用してください。
イベントハンドラでの事前初期化 （SVGアイコンは省略）
外部リソースが必要になるページまたは状態に遷移する前に、イベントハンドラで 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>
);
}