注意事項

基於 React 的框架 通常會幫您處理資源載入，因此您可能不需要自行呼叫此 API。詳情請參閱您使用的框架文件。

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：字串。您要下載和執行的資源網址。
  • options：物件。它包含以下屬性
    • as：必要的字串。資源類型。可能的值為 script 和 style。
    • precedence：字串。樣式表必填。指定樣式表相對於其他樣式表的插入位置。優先順序較高的樣式表可以覆蓋優先順序較低的樣式表。可能的值為 reset、low、medium、high。
    • crossOrigin：字串。要使用的 CORS 政策。可能的值為 anonymous 和 use-credentials。當 as 設定為 "fetch" 時，此屬性為必填。
    • integrity：字串。資源的加密雜湊，用於 驗證其真實性。
    • nonce：字串。加密 隨機數，允許在使用嚴格內容安全策略時使用資源。
    • fetchPriority：字串。建議資源擷取的相對優先順序。可能的值為 auto（預設值）、high 和 low。

回傳值

preinit 不會回傳任何值。

注意事項

  • 多次使用相同的 href 呼叫 preinit，效果與單次呼叫相同。
  • 在瀏覽器中，您可以在任何情況下呼叫 preinit：渲染組件時、在 Effect 中、在事件處理程序中等等。
  • 在伺服器端渲染或渲染伺服器組件時，preinit 只有在渲染組件時或源自渲染組件的非同步環境中呼叫它時才有效。任何其他呼叫都將被忽略。

用法

在渲染時預初始化

如果您知道組件或其子組件將使用特定資源，並且您希望資源在下載後立即評估並生效，請在渲染組件時呼叫 preinit。

預初始化的範例

預初始化外部腳本 1的 2:
範例 

import { preinit } from 'react-dom';

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

如果您希望瀏覽器下載腳本但不立即執行它，請改用 preload。如果您要載入 ESM 模組，請使用 preinitModule。

在事件處理程序中預初始化

在轉換到需要外部資源的頁面或狀態之前，在事件處理程序中呼叫 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>
  );
}
上一頁prefetchDNS
下一頁preinitModule