Note

Frameworks baseados em React frequentemente tratam o carregamento de recursos para você, então talvez você não precise chamar esta API sozinho. Consulte a documentação do seu framework para mais detalhes.

preinit permite que você busque e avalie ansiosamente uma folha de estilo ou script externo.

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

Referência

preinit(href, options)

Para pré-inicializar um script ou folha de estilo, chame a função preinit de react-dom.

import { preinit } from 'react-dom';

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

Veja mais exemplos abaixo.

A função preinit fornece ao navegador uma dica de que ele deve começar a baixar e executar o recurso fornecido, o que pode economizar tempo. Scripts que você preinit são executados quando terminam o download. Folhas de estilo que você pré-inicializa são inseridas no documento, o que faz com que entrem em vigor imediatamente.

Parâmetros

  • href: uma string. A URL do recurso que você deseja baixar e executar.
  • options: um objeto. Ele contém as seguintes propriedades:
    • as: uma string obrigatória. O tipo de recurso. Seus valores possíveis são script e style.
    • precedence: uma string. Obrigatório com folhas de estilo. Diz onde inserir a folha de estilo em relação a outras. Folhas de estilo com maior precedência podem substituir aquelas com menor precedência. Os valores possíveis são reset, low, medium, high.
    • crossOrigin: uma string. A política CORS a ser usada. Seus valores possíveis são anonymous e use-credentials.
    • integrity: uma string. Um hash criptográfico do recurso, para verificar sua autenticidade.
    • nonce: uma string. Um nonce criptográfico para permitir o recurso ao usar uma Política de Segurança de Conteúdo estrita.
    • fetchPriority: uma string. Sugere uma prioridade relativa para buscar o recurso. Os valores possíveis são auto (o padrão), high e low.

Retorna

preinit não retorna nada.

Ressalvas

  • Várias chamadas para preinit com o mesmo href têm o mesmo efeito de uma única chamada.
  • No navegador, você pode chamar preinit 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, preinit só tem efeito se você o chamar ao renderizar um componente ou em um contexto assíncrono originado da renderização de um componente. Quaisquer outras chamadas serão ignoradas.

Uso

Pré-inicializando ao renderizar

Chame preinit ao renderizar um componente se você souber que ele ou seus filhos usarão um recurso específico e estiver tudo bem com o recurso sendo avaliado e, portanto, entrando em vigor imediatamente após o download.

Exemplos de pré-inicialização

Example 1 of 2:
Pré-inicializando um script externo 

import { preinit } from 'react-dom';

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

Se você quiser que o navegador baixe o script, mas não o execute imediatamente, use preload em vez disso. Se você quiser carregar um módulo ESM, use preinitModule.

Pré-inicializando em um manipulador de eventos

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

import { preinit } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinit("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
PreviousprefetchDNS
NextpreinitModule