Introdução à versão mais recente do React 18

16 de outubro de 2024

React é uma biblioteca front-end Javascript de código aberto para a construção de interfaces de consumidor. O React é fácil de testar, funciona rápido e é eficiente, especialmente na criação de aditivos de UI escalonáveis ​​e reutilizáveis. 

Uma afirmação do plano de lançamento para o próximo modelo forte do React 18 foi realizada com a ajuda da equipe React. que está disponível na versão beta.

Falaremos sobre algumas das principais atualizações de função para o modelo de reação 18 com exemplos de código neste artigo.

Apresentando a nova API raiz 

Uma raiz no React refere-se à forma estatística do estágio superior que renderiza uma árvore. No React 18, teremos duas APIs raiz: a API raiz herdada e a nova API raiz. 

API raiz herdada 

A API raiz legada é a API atual conhecida como abordagem ReactDOM.render. A API raiz legada é semelhante à utilização no modelo de reação 17, ela criará uma raiz para caminhadas no modo legado. Antes de mergulhar nas reações 18 à produção, um cuidado pode ser introduzido sobre o uso da API raiz herdada. lentamente colocará em prática o uso da nova API raiz. A API raiz herdada pode ser descontinuada em versões futuras.

Você pode consultar o exemplo de código fornecido abaixo:

Nova API raiz

A nova API raiz pode ser observada com a abordagem `createRoot` do ReactDOM. Primeiro, devemos criar a base através do método `createRoot`, com os detalhes básicos como um problema para aplicá-la. Em seguida, precisamos nomear a raiz com o método `render` e ignorar o componente `app` devido ao parâmetro. Ao utilizar a nova API raiz, podemos usar todos os recursos multiplicados e concorrentes disponíveis no React 18.

Você pode consultar o seguinte código

Mudanças no método de hidratação

A abordagem de renderização e a abordagem de hidrato são semelhantes. Mas permite conectar ouvintes de eventos aos elementos HTML dentro dos compartimentos que são renderizados usando a abordagem do servidor ReactDOM no lado do servidor. Com a abordagem de raiz hidratada, o React 18 substitui essa abordagem de hidrato.

Mudanças no retorno de chamada de renderização

Da nova raiz, o retorno de chamada de renderização de API é removido. Mas podemos passá-lo como uma propriedade para o componente raiz.

Da nova raiz, o retorno de chamada de renderização da API é removido.

Melhoria no lote automático

No React 18, o recurso de lote mescla mais de uma atualização nacional em uma única re-renderização consolidada para desempenho avançado. Por exemplo, caso você substitua taxas de vários países em um gerenciador de recursos simples. Em seguida, o react18 agrupará essas atualizações em uma única atualização e renderizará novamente o aplicativo apenas uma vez, em vez de chamar o processo de renderização mais de uma vez. 

O desempenho geral do aplicativo será substancialmente melhorado com a ajuda dele. Ele também evita a renderização de aditivos com atualizações de país incompletas nas quais a variável de país mais eficaz é atualizada, o que também pode causar comportamento inadequado dentro do aplicativo.

A empresa de desenvolvimento React combinará automaticamente todas as atualizações do país, independentemente de onde elas se originem. Portanto, se alguma atualização for interna a um tempo limite, promessa, manipulador de evento local ou outro evento, a versão React 18 irá agrupá-la da mesma maneira que atualiza os eventos internos do React. Além disso, isso melhorará o desempenho geral do aplicativo e causará menos renderizações dos aditivos em comparação com as versões anteriores do React.

Desativar lote automático

Às vezes, precisamos reequipar imediatamente o componente após cada mudança de estado. Nesse cenário, para desabilitar o lote automático, use o método flushSync.

Expectativa

Podemos implementar renderização no lado do servidor em serviços de desenvolvimento React Native renderizando todos os componentes primeiro no servidor. Em seguida, precisamos enviar os resultados como elementos HTML para o navegador.

O React carregará o JavaScript normalmente dentro do navegador. Em seguida, conectará os elementos HTML gerados no servidor com o javascript e a lógica de hidratação.

A renderização do aspecto do servidor (SSR) nos permite visualizar o conteúdo da página antes que o pacote JavaScript seja carregado e executado.

O recurso de suspense atrasará a renderização dos componentes no desenvolvimento reativo nativo. Foi introduzido pela primeira vez no React versão 16.6 com obstáculos positivos e uma assistência simples para renderização de suspense.

A versão estável do React 18 suportará um recurso de suspense completo baseado no recurso simultâneo, junto com o seguinte:

• Transição Atrasada: dá instruções aos componentes para aguardarem a resolução dos dados antes de prosseguir com uma nova transição de estado.
• Limitação de espaço reservado: limitando a aparência do espaço reservado aninhado e dos componentes de espaço reservado sucessivos, reduzindo o desperdício da interface do usuário.
• Lista suspensa: a organização dos componentes na ordem em que esses componentes precisam ser revelados ao usuário é feita por SuspendList.

Em relação às versões anteriores, o React 18 lida com o suspense de maneira diferente. Esta parece ser uma mudança radical. Mas com o lote automático, o impacto da mudança é mínimo. O processo de migração do aplicativo para React versão 18 não é afetado por isso. 

O suspense em React 16 e 17 foi chamado de suspense legado anteriormente. O suspense aprimorado no React 18 é chamado de suspense simultâneo.

Em geral, os recursos de suspense herdados e simultâneos fornecem uma experiência básica idêntica ao usuário, além de resolver o método Componente que Suspende, como no exemplo a seguir.

Aqui está um exemplo de uma explicação fácil de como um fator de suspense fará com que as pinturas nas versões mais antigas e novas reajam às 18 versões:

• O suspense herdado montará imediatamente o elemento irmão no DOM. seus ganchos/resultados de ciclo de vida também podem ser acionados. Ele não aguardará a resolução do componente suspenso.
• Em comparação com o suspense herdado, o suspense simultâneo não anexará o fator irmão ao DOM e também não armazenará seus ganchos/resultados do ciclo de vida até que o componente que suspende seja resolvido. Todos os problemas atuais do suspense legado podem ser resolvidos por meio dessas novas melhorias.

Moeda simultânea

Para executar várias tarefas ao mesmo tempo, a simultaneidade ajuda você. Se considerarmos os serviços de desenvolvimento de aplicativos nativos de reação padrão, por exemplo. A simultaneidade permite a interação da UI com os componentes de reação no mesmo momento em que executamos uma ação de animação em um componente.

Anteriormente, todas as atualizações tinham a mesma prioridade e apenas um estado definido podia ser atualizado. A API de transição de início permite que o novo recurso de concorrência marque todas as atualizações como não urgentes. O React as interromperá ou as colocará em espera, com base na prioridade definida.

Conclusão

Nos esforçamos para fornecer as melhores informações e esperamos que as informações acima sejam úteis para você. Para a comunidade de desenvolvedores, a versão estável do React 18 trará um novo e empolgante conjunto de recursos. A principal preocupação reside na concorrência e na transição gradual para o modelo mais moderno. Como ainda está em fase beta, a empresa de desenvolvimento React Native criou uma organização operacional para preparar o ambiente para uma transição tranquila para o novo modelo.