preconnect

preconnect("https://example.com");

• 參考
  • preconnect(href)
• 用法
  • 渲染時預連線
  • 在事件處理器中預連線

參考

preconnect(href)

要預連線到主機，請從 react-dom 呼叫 preconnect 函式。

import { preconnect } from 'react-dom';

function AppRoot() {
  preconnect("https://example.com");
  // ...
}

請參閱以下更多範例。

preconnect 函式會向瀏覽器提示它應該開啟與指定伺服器的連線。如果瀏覽器選擇這樣做，可以加快從該伺服器載入資源的速度。

參數

• href：字串。您要連線的伺服器 URL。

回傳值

preconnect 不會回傳任何值。

注意事項

• 多次呼叫 preconnect 到同一個伺服器，效果與單次呼叫相同。
• 在瀏覽器中，您可以在任何情況下呼叫 preconnect：渲染元件時、在 Effect 中、在事件處理器中等等。
• 在伺服器端渲染或渲染伺服器元件時，preconnect 只有在渲染元件時或在源自渲染元件的非同步環境中呼叫它時才有效。任何其他呼叫都將被忽略。
• 如果您知道您需要的特定資源，您可以改為呼叫其他函式，這些函式會立即開始載入資源。
• 與網頁本身託管的伺服器建立預連線沒有任何好處，因為在提供提示時已經建立了連線。

用法

渲染時預連線

如果您知道元件的子元件將從該主機載入外部資源，請在渲染元件時呼叫 preconnect。

import { preconnect } from 'react-dom';

function AppRoot() {
  preconnect("https://example.com");
  return ...;
}

在事件處理程式中預連線

在轉換到需要外部資源的頁面或狀態之前，在事件處理程式中呼叫 preconnect。這比在新頁面或狀態的渲染過程中呼叫它更早地開始這個過程。

import { preconnect } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preconnect('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}