preinitModule

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

• Referência
  • preinitModule(href, options)
• Uso
  • Pré-carregamento durante a renderização
  • Pré-carregamento em um manipulador de eventos

Referência

preinitModule(href, options)

Para fazer o preinit de um módulo ESM, chame a função preinitModule de react-dom.

import { preinitModule } from 'react-dom';

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

Veja mais exemplos abaixo.

A função preinitModule fornece ao navegador uma dica de que ele deve começar a baixar e executar o módulo fornecido, o que pode economizar tempo. Módulos que você faz o preinit são executados quando terminam de ser baixados.

Parâmetros

• href: uma string. A URL do módulo que você deseja baixar e executar.
• options: um objeto. Ele contém as seguintes propriedades:
  • as: uma string obrigatória. Deve ser 'script'.
  • crossOrigin: uma string. A política CORS a ser usada. Seus possíveis valores são anonymous e use-credentials.
  • integrity: uma string. Uma hash criptográfica do módulo, para verificar sua autenticidade.
  • nonce: uma string. Um nonce criptográfico para permitir o módulo ao usar uma Content Security Policy estrita.

Retorna

preinitModule não retorna nada.

Ressalvas

• Múltiplas chamadas para preinitModule com o mesmo href têm o mesmo efeito de uma única chamada.
• No navegador, você pode chamar preinitModule em qualquer situação: ao renderizar um componente, em um Effect, em um manipulador de eventos, e assim por diante.
• Na renderização do lado do servidor ou ao renderizar Componentes do Servidor, preinitModule só tem efeito se você o chamar durante a renderização de um componente ou em um contexto assíncrono originário da renderização de um componente. Quaisquer outras chamadas serão ignoradas.

Uso

Pré-carregamento durante a renderização

Chame preinitModule ao renderizar um componente se você souber que ele ou seus filhos usarão um módulo específico e você estiver de acordo com o fato do módulo ser avaliado e, portanto, ter efeito imediatamente após ser baixado.

import { preinitModule } from 'react-dom';

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

Se você quiser que o navegador baixe o módulo, mas não o execute imediatamente, use preloadModule em vez disso. Se você deseja preinit um script que não é um módulo ESM, use preinit.

Pré-carregamento em um manipulador de eventos

Chame preinitModule em um manipulador de eventos antes de fazer a transição para uma página ou estado onde o módulo será necessário. Isso inicia o processo mais cedo do que se você o chamasse durante a renderização da nova página ou estado.

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