preinitModule

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

• Referência
  • preinitModule(href, options)
• Uso
  • Pré-carregamento ao renderizar
  • Pré-carregamento em um manipulador de eventos

Referência

preinitModule(href, options)

Para pré-inicializar um módulo ESM, chame a função preinitModule do 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ê 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 utilizada. Seus valores possíveis são anonymous e use-credentials.
  • integrity: uma string. Um hash criptográfico do módulo, para verificar sua autenticidade.
  • nonce: uma string. Um nonce criptográfico para permitir o módulo ao usar uma Política de Segurança de Conteúdo rigorosa.

Retornos

preinitModule não retorna nada.

Ressalvas

• Chamadas múltiplas para preinitModule com o mesmo href têm o mesmo efeito que uma única chamada.
• No navegador, você pode chamar preinitModule em qualquer situação: ao renderizar um componente, em um Efeito, 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ê chamá-lo enquanto renderiza um componente ou em um contexto assíncrono originado da renderização de um componente. Qualquer outra chamada será ignorada.

Uso

Pré-carregamento ao renderizar

Chame preinitModule ao renderizar um componente se você sabe que ele ou seus filhos usarão um módulo específico e você está de acordo com o módulo sendo avaliado e, assim, tendo 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ê quiser pré-inicializar 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 transitar para uma página ou estado onde o módulo será necessário. Isso inicia o processo mais cedo do que se você chamá-lo 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}>Iniciar Assistente</button>
  );
}