preinitModule

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

• Reference
  • preinitModule(href, options)
• שימוש
  • Preloading בזמן רינדור
  • Preloading בתוך event handler

Reference

preinitModule(href, options)

כדי לבצע preinit למודול ESM, קראו לפונקציה preinitModule מתוך react-dom.

import { preinitModule } from 'react-dom';

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

ראו דוגמאות נוספות בהמשך.

הפונקציה preinitModule מספקת לדפדפן רמז שכדאי להתחיל להוריד ולהריץ את המודול הנתון, מה שיכול לחסוך זמן. מודולים שמבצעים להם preinit יורצו כשיסיימו לרדת.

Parameters

• href: מחרוזת. ה-URL של המודול שברצונכם להוריד ולהריץ.
• options: אובייקט. כולל את המאפיינים הבאים:
  • as: מחרוזת חובה. חייב להיות 'script'.
  • crossOrigin: מחרוזת. מדיניות CORS לשימוש. הערכים האפשריים: anonymous ו-use-credentials.
  • integrity: מחרוזת. hash קריפטוגרפי של המודול לצורך אימות אותנטיות.
  • nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המודול כשמשתמשים ב-Content Security Policy קשוחה.

Returns

preinitModule לא מחזירה דבר.

Caveats

• כמה קריאות ל-preinitModule עם אותו href משפיעות כמו קריאה אחת.
• בדפדפן אפשר לקרוא ל-preinitModule בכל מצב: בזמן רינדור קומפוננטה, בתוך effect, בתוך event handler, וכן הלאה.
• ברינדור צד שרת או ברינדור Server Components, ל-preinitModule יש השפעה רק אם קוראים לה בזמן רינדור קומפוננטה או בהקשר async שמקורו ברינדור קומפוננטה. קריאות אחרות ייחסמו.

שימוש

Preloading בזמן רינדור

קראו ל-preinitModule בזמן רינדור קומפוננטה אם אתם יודעים שהיא או הילדים שלה ישתמשו במודול ספציפי, ואם מקובל עליכם שהמודול יוערך וייכנס לפעולה מיד כשהורדתו מסתיימת.

import { preinitModule } from 'react-dom';

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

אם אתם רוצים שהדפדפן יוריד את המודול אבל לא יריץ אותו מייד, השתמשו ב-preloadModule במקום. אם אתם רוצים לבצע preinit לסקריפט שאינו מודול ESM, השתמשו ב-preinit.

Preloading בתוך event handler

קראו ל-preinitModule בתוך event handler לפני מעבר לעמוד או מצב שבהם המודול יידרש. כך התהליך מתחיל מוקדם יותר לעומת קריאה בזמן רינדור העמוד או המצב החדש.

import { preinitModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinitModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}