Como atualizar o React 18

O React 18 evolui a popular estrutura de componentes JavaScript com novos recursos construídos em torno de renderização e suspense simultâneos. Ele promete melhor desempenho, mais recursos e uma experiência de desenvolvedor aprimorada para aplicativos que fazem a troca.

Neste artigo, mostraremos como atualizar suas bases de código existentes para o React 18. Observe que este guia é apenas uma visão geral das alterações mais aplicáveis. A migração deve ser bastante fácil para pequenos projetos que já seguem as melhores práticas do React; grandes conjuntos de componentes complexos podem levar a alguns problemas, que detalharemos a seguir.

índice

  1. Instalando o React 18
  2. Habilitando recursos do React 18: a nova API raiz
  3. Processando substituição de retorno de chamada
  4. Depurando problemas de atualização
    1. Procurar
    2. Suporta atualização de status de lote
    3. Pare de usar recursos removidos e não suportados
  5. renderização do lado do servidor
  6. Comece com os recursos do React 18
  7. Resumo

Instalando o React 18

Antes de fazer qualquer outra coisa, use npm para atualizar a dependência React do seu projeto para v18:

 $ npm install [email protected] [email protected]

A nova versão não possui tecnicamente nenhuma incompatibilidade com as versões anteriores. Novos recursos são ativados voluntariamente. Como você ainda não alterou nenhum código, deve ser capaz de iniciar seu aplicativo e vê-lo renderizar corretamente. Seu projeto será executado com seu comportamento React 17 existente.

 $ npm início

Habilitando recursos do React 18: a nova API raiz

Usar o React 18 sem nenhuma alteração na base de código causará um efeito colateral: você verá um aviso no console do navegador toda vez que seu aplicativo for montado no modo de desenvolvimento.

 ReactDOM.render não é mais suportado no React 18. Em vez disso, use createRoot. Até você mudar para a nova API, seu aplicativo se comportará como se estivesse executando o React 17.

Essa mensagem de descontinuação pode ser ignorada com segurança se você não estiver pronto para atualizar seu projeto. Quando você deseja adotar os recursos do React 18, você precisa fazer a mudança descrita. A antiga função ReactDOM.render() foi substituída por uma nova API raiz que é mais orientada a objetos. Além de melhorar a usabilidade, também permite o sistema de renderização simultânea que alimenta todos os novos recursos de título.

Dentro do arquivo index.js ou app.js , procure por linhas semelhantes a estas:

 importar App de "./App.js" ; importe ReactDOM de "react-dom" ; const container = documento. getElementById("reagir"); React DOM. render(<App/>, container);

Este é um ponto de entrada típico para um aplicativo React. Representa uma instância do importado. Componente do App como o elemento raiz do seu aplicativo. O conteúdo renderizado é depositado como innerHTML do elemento HTML com id="react" .

Para mudar para a API raiz do React 18, substitua o código acima pelo seguinte:

 importar App de "./App.js" ; import { createRoot } from "react-dom/client" ; const container = documento. getElementById("reagir"); const root = createRoot(container); raiz. render(<Aplicativo/>);

Isso tem um efeito equivalente à antiga API ReactDOM.render() . Em vez de inicializar um elemento raiz e renderizar seu aplicativo como uma única operação imperativa, o React 18 faz você primeiro criar um objeto raiz e depois renderizar explicitamente seu conteúdo.

Em seguida, procure qualquer lugar em seu código onde você desmonte seu nó raiz. Altere ReactDOM.unmountComponentAtNode() para o novo método unmount( unmount() em seu objeto raiz:

 // Antes de importar App de "./App.js" ; importe ReactDOM de "react-dom" ; const container = documento. getElementById("reagir"); React DOM. render(<App/>, container); React DOM. unmountComponentAtNode(container); // Após importar App de "./App.js" ; import { createRoot } from "react-dom/client" ; const container = documento. getElementById("reagir"); const root = createRoot(container); raiz. render(<Aplicativo/>); raiz. desmontar();

Processando substituição de retorno de chamada

O argumento de retorno de chamada opcional do método ReactDOM.render() não tem uma contrapartida direta na API raiz do React 18. Anteriormente, você podia usar este código para iniciar o Rendered! para o console após o React terminar de renderizar o nó raiz:

 importar App de "./App.js" ; importe ReactDOM de "react-dom" ; const container = documento. getElementById("reagir"); React DOM. render (< App />, container , ( ) => console.log( "Rendered!" ) );

Essa funcionalidade foi removida porque o tempo da chamada de retorno de chamada é imprevisível ao usar os novos recursos de hidratação parcial e renderização do servidor de streaming do React 18. Se você já estiver usando retornos de chamada de renderização e precisar manter a compatibilidade , poderá obter um comportamento semelhante usando o mecanismo refs:

 import { createRoot } from "react-dom/client" ; const App = ( { callback } ) => ( < div ref = { callback } > < h1 > Demo App </ h1 > </ div > ) ; const container = documento. getElementById("reagir"); const root = createRoot(container); raiz. render ( < App callback = { ( ) => console.log( "Rendered!" ) } /> );

React chama referências de função quando os componentes são montados. Definir uma referência ao componente que é seu nó raiz permite detectar quando a renderização ocorre, fornecendo um efeito semelhante ao antigo sistema de retorno de chamada de renderização.

Depurando problemas de atualização

Seu aplicativo agora deve ser renderizado usando os recursos do React 18 e sem nenhum aviso do console. Teste seu aplicativo completamente para garantir que tudo ainda funcione conforme o esperado. Se você encontrar problemas, poderá resolvê-los com essas resoluções comuns.

Procurar

Aplicativos encapsulados no componente <StrictMode> podem se comportar de maneira diferente quando renderizados no modo de desenvolvimento do React 18. Isso ocorre porque o modo estrito agora testa se sua base de código suporta o estado reutilizável, um conceito que foi totalmente introduzido no React em uma versão futura.

O estado de rascunho permite que o React remonte um componente excluído anteriormente com seu estado mais recente restaurado automaticamente. Isso requer que seus componentes sejam resistentes a efeitos de invocação dupla. O modo estrito agora ajuda você a se preparar para o estado de rascunho simulando a montagem, desmontagem e remontagem de seus componentes cada vez que eles são usados, revelando quaisquer problemas em que o estado anterior não possa ser restaurado. Você pode desabilitar o Strict Mode se encontrar problemas com seu aplicativo ou suas dependências que você não está pronto para resolver.

Suporta atualização de status de lote

O React 18 altera a forma como as atualizações de estado são "agregadas" para melhorar o desempenho. Quando você altera os valores de estado várias vezes em uma função, o React tenta combiná-los em uma única representação:

 const Component = ( ) => { const [ query , setQuery ] = useState( "" ); const[consulta, setQueryCount] = useState(0); /** * Duas atualizações de estado, apenas uma re-renderização */ setQuery( "demo" ); setQueryCount(consulta+1); };

Esse mecanismo aumenta a eficiência, mas anteriormente só funcionava dentro de manipuladores de eventos React. Com o React 18, ele funciona com todas as atualizações de estado, mesmo se originadas de manipuladores de eventos nativos, timeouts ou promessas. Alguns códigos podem se comportar de forma diferente de antes se você executar atualizações de status consecutivas em qualquer um desses locais.

 const Component = ( ) => { const [ query , setQuery ] = useState( "" ); const [ queryId , setQueryId ] = useState( "" ); const[consulta, setQueryCount] = useState(0); const handleSearch = query => { fetch(query). then ( ( ) => { setQuery( "demo" ); setQueryCount ( 1 ) ; // No React 17, define como "query-1" // No React 18, define como "query-0" - atualização de estado anterior é em lote com este setQueryId(`query-${queryCount}`); }); } } ;

Você pode desabilitar esse comportamento em situações em que não está pronto para refatorar seu código. Envolva as atualizações de estado em flushSync() para forçá-las a confirmar imediatamente:

 const Component = ( ) => { const [ query , setQuery ] = useState( "" ); const [ queryId , setQueryId ] = useState( "" ); const[consulta, setQueryCount] = useState(0); const handleSearch = query => { fetch(query). then ( ( ) => { flushSync ( ( ) => { setQuery( "demo" ); setQueryCount ( 1 ) ; } ) ; // Configura para "query-1" setQueryId ( `query - $ { queryCount } ` ) ; }); } } ;

Pare de usar recursos removidos e não suportados

Depois que todos os itens acima forem abordados, seu aplicativo deverá ser totalmente compatível com o React 18. Embora haja mais algumas alterações na superfície da API, elas não devem afetar a maioria dos aplicativos. Aqui estão alguns para manter em mente:

  • unstable_changedBits foi removido – Esta API não suportada permite que você desative o recebimento de atualizações de contexto. Não está mais disponível.
  • O preenchimento de poly Object.assign() foi removido. – Você precisa adicionar manualmente o pacote polyfill object-assign se precisar suportar navegadores muito antigos sem um Object.assign() .
  • O Internet Explorer não é mais suportado – O React removeu oficialmente o suporte ao Internet Explorer antes do fim do suporte ao navegador em junho. Você não deve atualizar para o React 18 se ainda precisar que seu aplicativo seja executado no IE.
  • Usar fail com um fallback undefined agora é equivalente a null – Os limites de fallback com fallback={undefined} foram omitidos anteriormente, permitindo que o código fosse em cascata para o próximo limite principal na árvore. O React 18 agora honra componentes de suspense não suportados.

renderização do lado do servidor

Os aplicativos que usam renderização do lado do servidor exigirão mais algumas alterações para funcionar com o React 18.

De acordo com a nova API root, você deve substituir a antiga função hydrate() em seu código do lado do cliente pela nova hydrateRoot() fornecida pelo pacote react-dom/client :

 // Antes de importar App de "./App.js" ; importe ReactDOM de "react-dom" ; const container = documento. getElementById("reagir"); React DOM. hidrato (<App />, container); // Após importar App de "./App.js" ; import { createRoot } from "react-dom/client" ; const container = documento. getElementById("reagir"); const root = hydrateRoot ( container , < App /> ) ;

Em seu código do lado do servidor, substitua as chamadas de API de renderização obsoletas por suas novas contrapartes. Na maioria dos casos, você deve alterar renderToNodeStream() para o novo renderToReadableStream() . As novas APIs de streaming desbloqueiam o acesso aos recursos de renderização do servidor de streaming do React 18, onde o servidor pode continuar a fornecer novo HTML ao navegador após a renderização inicial do seu aplicativo.

Comece com os recursos do React 18

Agora que você atualizou, pode começar a tornar seu aplicativo mais poderoso incorporando recursos do React 18. O uso de simultaneidade do React significa que as renderizações de componentes podem ser interrompidas, desbloqueando novos recursos e uma interface do usuário mais responsiva.

Alguns dos recursos adicionados incluem atualizações importantes do Suspense, uma maneira de priorizar atualizações de status com Transitions e um mecanismo interno para acelerar re-renderizações causadas por atualizações não urgentes, mas de alta frequência. Há também várias mudanças e melhorias diversas: você pode retornar undefined do método render() de um componente, o aviso sobre chamar setState() em componentes desmontados foi removido e vários novos atributos HTML, como imageSizes , imageSrcSet e aria-description são reconhecidos pelo componente React DOM renderer.

Resumo

O React 18 é estável e pronto para uso. Na maioria dos casos, o processo de atualização deve ser rápido e fácil, exigindo apenas uma atualização do npm e uma mudança para a nova API raiz. No entanto, você ainda deve testar todos os seus componentes: eles podem se comportar de maneira diferente em algumas situações, como no modo estrito ou quando o lote automático é aplicado.

Esta nova versão aponta para a direção futura do React como um framework de alto desempenho para todos os tipos de aplicações web. Ele também estende os recursos de renderização do lado do servidor do React, adicionando Suspense do lado do servidor e a capacidade de continuar transmitindo conteúdo para seus usuários após a renderização inicial. Isso dá aos desenvolvedores mais flexibilidade para distribuir a renderização no cliente e no servidor.

  • Como usar ganchos do Kubernetes para rastrear os ciclos de vida do contêiner
  • Como habilitar o plano de energia de desempenho máximo no Windows 10

descubra mais conteúdo

Google Pixel Watch também tem detecção de queda, mas não até o próximo ano

As melhores xícaras de café aquecidas de 2022

Como automatizar seu iPhone com base na hora, atividade ou localização

"Isso deve ter sido antes do meu tempo"

Por que a NASA enviou Snoopy para a Lua? – Revisão geek

O que é uma carga fantasma?

O que há de novo no React 18?

A nova versão do React traz várias mudanças e melhorias como: batching automático, novas APIs como startTransition, SSR streaming e novo suporte para Suspense.

Qual é a versão mais recente do React?

reagir
Plataformas compatíveis Multi plataforma
Versões
Última versão estável 18.1 (26 de abril de 2022)
Links

Quão bom é o React?

A velocidade é outra grande vantagem do React , pois é perfeito para performance, para aquelas aplicações com muita carga de dados e tabelas enormes. Ele também possui uma unidade isomórfica que oferece melhor desempenho do que, por exemplo, Angular ou Polymer.

O que é React e para que serve?

O React ajuda você a criar interfaces de usuário interativas de maneira simples. Projete visualizações simples para cada estado em seu aplicativo, e o React cuidará de atualizar e renderizar com eficiência os componentes corretos quando os dados forem alterados.

Ir arriba