preinit

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

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

Reference

preinit(href, options)

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

import { preinit } from 'react-dom';

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

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

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

Parameters

• href: מחרוזת. ה-URL של המשאב שברצונכם להוריד ולהריץ.
• options: אובייקט. כולל את המאפיינים הבאים:
  • as: מחרוזת חובה. סוג המשאב. הערכים האפשריים: script ו-style.
  • precedence: מחרוזת. חובה עבור stylesheets. מציינת איפה להכניס את ה-stylesheet ביחס לאחרים. stylesheets עם קדימות גבוהה יותר יכולים לעקוף כאלה עם קדימות נמוכה יותר. הערכים האפשריים: reset, low, medium, high.
  • crossOrigin: מחרוזת. מדיניות CORS לשימוש. הערכים האפשריים: anonymous ו-use-credentials. חובה כשהערך של as הוא "fetch".
  • integrity: מחרוזת. hash קריפטוגרפי של המשאב לצורך אימות אותנטיות.
  • nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המשאב כשמשתמשים ב-Content Security Policy קשוחה.
  • fetchPriority: מחרוזת. מציעה עדיפות יחסית לטעינת המשאב. הערכים האפשריים: auto (ברירת מחדל), high, ו-low.

Returns

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

Caveats

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

שימוש

Preinit בזמן רינדור

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

Preinit בתוך event handler

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

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