preconnect

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

• 参考
  • preconnect(href)
• 用法
  • 渲染时预连接
  • 在事件处理程序中预连接

参考

¥Reference

preconnect(href)

要预连接到主机，请从 react-dom 调用 preconnect 函数。

¥To preconnect to a host, call the preconnect function from react-dom.

import { preconnect } from 'react-dom';

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

请参阅下面的更多示例。

¥See more examples below.

preconnect 函数向浏览器提供提示，表明它应该打开与给定服务器的连接。如果浏览器选择这样做，则可以加快从该服务器加载资源的速度。

¥The preconnect function provides the browser with a hint that it should open a connection to the given server. If the browser chooses to do so, this can speed up the loading of resources from that server.

参数

¥Parameters

• href：一个字符串。你要连接的服务器的 URL。

  ¥href: a string. The URL of the server you want to connect to.

返回

¥Returns

preconnect 不返回任何内容。

¥preconnect returns nothing.

注意事项

¥Caveats

• 对同一服务器的 preconnect 的多次调用与单次调用具有相同的效果。

  ¥Multiple calls to preconnect with the same server have the same effect as a single call.

• 在浏览器中，任何情况都可以调用 preconnect：在渲染组件时、在副作用中、在事件处理程序中等等。

  ¥In the browser, you can call preconnect in any situation: while rendering a component, in an Effect, in an event handler, and so on.

• 在服务器端渲染或渲染服务器组件时，preconnect 仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。

  ¥In server-side rendering or when rendering Server Components, preconnect only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.

• 如果你知道需要的具体资源，你可以调用 其他功能，这将立即开始加载资源。

  ¥If you know the specific resources you’ll need, you can call other functions instead that will start loading the resources right away.

• 预连接到托管网页本身的同一服务器没有任何好处，因为在给出提示时它已经被连接到。

  ¥There is no benefit to preconnecting to the same server the webpage itself is hosted from because it’s already been connected to by the time the hint would be given.

用法

¥Usage

渲染时预连接

¥Preconnecting when rendering

如果你知道其子组件将从该主机加载外部资源，则在渲染组件时调用 preconnect。

¥Call preconnect when rendering a component if you know that its children will load external resources from that host.

import { preconnect } from 'react-dom';

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

在事件处理程序中预连接

¥Preconnecting in an event handler

在转换到需要外部资源的页面或状态之前，在事件处理程序中调用 preconnect。与在渲染新页面或状态期间调用该进程相比，这可以更早地启动该进程。

¥Call preconnect in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { preconnect } from 'react-dom';

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