preinit

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

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

הפניה

preinit(href, options)

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

import { preinit } from 'react-dom';

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

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

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

פרמטרים

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

מחזירה

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

אזהרות

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

שימוש

Preinit בזמן רינדור

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

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

קראו ל-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>
  );
}