preinitModule

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

• הפניה
  • preinitModule(href, options)
• שימוש
  • טעינה מראש בזמן רינדור
  • טוען מראש בתוך מטפל באירועים

הפניה

preinitModule(href, options)

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

import { preinitModule } from 'react-dom';

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

עוד דוגמאות נוספות.

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

פרמטרים

• href: מחרוזת. ה-URL הורד את המודול שברצונכם ולהריץ.
• options: אובייקט. כולל את המאפיינים הבאים:
  • as: מחרוזת חובה. חייב להיות 'script'.
  • crossOrigin: מחרוזת. מדיניות CORS שימוש. הערכים האפשריים: anonymous ו-use-credentials.
  • integrity: מחרוזת. hash קריפטוגרפיה של המודול לצורך [תאימות אותנטיות]https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
  • nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המודול כשמשתמשים ב-Content Security Policy קשוחה.

מחזירה

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

אזהרות

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

שימוש

טעינה מראש בזמן רינדור

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

import { preinitModule } from 'react-dom';

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

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

טוען מראש בתוך מטפל באירועים

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

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>
  );
}