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