preinitModule

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

• 參考
  • preinitModule(href, options)
• 用法
  • 渲染時預載
  • 在事件處理器中預載

參考

preinitModule(href, options)

要預先初始化 ESM 模組，請從 react-dom 呼叫 preinitModule 函式。

import { preinitModule } from 'react-dom';

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

請參閱以下更多範例。

preinitModule 函式會向瀏覽器提示它應該開始下載和執行指定的模組，這可以節省時間。您使用 preinit 的模組會在下載完成後執行。

參數

• href：字串。您要下載和執行的模組網址。
• options：物件。它包含以下屬性
  • as：必填字串。它必須是 'script'
  • crossOrigin：字串。要使用的 CORS 政策。可能的值為 anonymous 和 use-credentials。
  • integrity：字串。模組的加密雜湊，用於 驗證其真實性。
  • nonce：字串。加密 nonce，以便在使用嚴格的內容安全策略時允許模組。

回傳值

preinitModule 不會回傳任何值。

注意事項

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

用法

在渲染時預載

如果您知道組件或其子組件將使用特定模組，並且您希望模組在下載後立即執行，請在渲染組件時呼叫 preinitModule。

import { preinitModule } from 'react-dom';

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

如果您希望瀏覽器下載模組但不立即執行它，請改用 preloadModule。如果您要預先初始化非 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>
  );
}