React v17.0 Release Candidate

React anuncia sua versão RC 17.
React v17.0 Release Candidate: No New Features

No dia 10/08/2020 saiu uma publicação sobre a nova versão do React, a React v17.0 Release Candidate.

Saiba a principal função da versão, quais mudanças você pode esperar dela e como você pode experimentar esta versão.

Continua após a publicidade

Sem novos recursos

A versão do React v17.0 Release Candidate não terá novos recursos voltado para o desenvolvedor. Essa versão tem como foco principal facilitar a atualização do próprio React.

O pessoal do React afirma que estão trabalhando em novos recursos do React, porém, eles não fazem parte desta nova versão.

A versão 17 do React é um “stepping stone” para tornar mais seguro uma árvore gerenciada entre diferentes versões.

“In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.”

Atualizações All-or-nothing

Atualmente as atualizações do React é “tudo ou nada” (All-or-nothing), ou você utiliza uma versão antiga ou atualiza todo o seu aplicativo para uma nova versão, sem meio-termo.

Funciona? Sim, mas não esta sendo a melhor solução, e por isso, o React 17 permite atualizações graduais. Quando você atualiza do React 15 para o 16, por exemplo, normalmente atualiza todo o seu aplicativo de uma vez. Isso funciona para a maioria dos aplicativos, mas pode se tornar cada vez mais desafiador se a base de código foi escrita há alguns anos e não é mantida ativamente.

We’re fixing many of those problems with React 17. This means that when React 18 and the next future versions come out, you will now have more options.

Será possível atualizar todo o seu aplicativo de uma vez, e também, atualiza-lo por partes. Por exemplo, você pode decidir migrar a maior parte do seu aplicativo para o React 18, mas manter algumas partes do React 17.

Lembrando que isso não significa que você precise fazer atualizações graduais. Para a maioria dos aplicativos, atualizar tudo de uma vez ainda é a melhor solução.

Para habilitar atualizações graduais, o React precisou fazer algumas alterações no sistema de eventos do React, tornando essa versão um lançamento importante porque essas alterações são potencialmente importantes. Na prática, eles precisaram mudar menos de vinte componentes de mais de 100.00, então o pessoal do React espera que a maioria dos aplicativos possam atualizar para o React 17 sem muitos problemas.

Se você encontrar problemas, abra uma issue.

Demonstração de atualizações graduais

É possível ver uma demonstração de como carregar uma versão mais antiga do React. Esta demonstração usa o Create React App, mas deve ser possível seguir uma abordagem semelhante com qualquer outra ferramenta.

• O React disponibilizou um repositório de exemplo.

Note

We’ve postponed other changes until after React 17. The goal of this release is to enable gradual upgrades. If upgrading to React 17 were too difficult, it would defeat its purpose.

Mudanças na delegação do Evento

No React sempre foi possível aninhar aplicativos desenvolvidos com diferentes versões do React. No entanto, era bastante frágil por causa de como o sistema de eventos funcionava.

Nos componentes do React, você geralmente escreve manipuladores de eventos embutidos:

<button onClick={handleClick}>

O DOM manipula este código algo como:

myButton.addEventListener('click', handleClick);

No entanto, para a maioria dos eventos, o React não os anexa ao DOM nos quais você os declara. Em vez disso, o React anexa um manipulador por tipo de evento diretamente no document. Isso é chamado de delegação de evento.

O React faz a delegação de eventos automaticamente desde sua primeira versão. Quando um evento DOM é disparado no documento, o React descobre qual componente deve ser chamado e, em seguida, o evento React “borbulha” para cima através dos seus componentes. Mas, por trás, o evento nativo já atingiu o document, onde o React instala seus manipuladores de eventos.

No entanto, esse é um problema para atualizações graduais.

Podemos pensar em várias versões do React em uma página, todas elas registram manipuladores de eventos na parte superior. Isso quebra o e.stopPropagation(): se uma árvore aninhada interromper a propagação de um evento, a árvore externa ainda o receberia. Isso tornou difícil aninhar diferentes versões do React. Essa preocupação não é hipotética, por exemplo, o editor Atom descobriu isso há quatro anos.

É por isso que estão mudando a forma como o React anexa eventos ao DOM nos bastidores.

In React 17, React will no longer attach event handlers at the document level. Instead, it will attach them to the root DOM container into which your React tree is rendered:

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

React 16 e anteriores

No React 16 e anteriores, o React serviria o document.addEventListener() para a maioria dos eventos. Em vez disso, o React v17.0 Release Candidate chamará rootNode.addEventListener().

Imagem do Post do React no Blog

Por conta dessa mudança, agora é mais seguro incorporar uma árvore do React gerenciada por uma versão dentro de uma árvore gerenciada por uma versão diferente do React. É importante lembrar que para isso funcionar, ambas as versões precisam ser 17 ou superior. Sendo assim é importante atualizar para a versão 17. De certa forma, o React v17.0 Release Candidate é um lançamento “stepping stone” que torna as próximas atualizações graduais viáveis.

Essa mudança também torna mais fácil incorporar o React a aplicativos desenvolvidos com outras tecnologias.

For example, if the outer “shell” of your app is written in jQuery, but the newer code inside of it is written with React, e.stopPropagation() inside the React code would now prevent it from reaching the jQuery code — as you would expect. This also works in the other direction. If you no longer like React and want to rewrite your app — for example, in jQuery — you can start converting the outer shell from React to jQuery without breaking the event propagation.

O React confirma que vários problemas relatados ao longo dos anos em seu rastreador de problemas relacionados à integração do React com o código não React foram corrigidos pelo novo comportamento.

Note
You might be wondering whether this breaks Portals outside of the root container. The answer is that React also listens to events on portal containers, so this is not an issue.

Corrigindo possíveis problemas

Como é de se esperar com qualquer alteração significativa, é provável que alguma parte do código precise ser ajustado. O pessoal do React conta que o Facebook precisou ajustar cerca de 10 módulos no total (de milhares) para trabalhar com essa nova versão.

At Facebook, we had to adjust about 10 modules in total (out of many thousands) to work with this change.

Por exemplo, se você adicionar ouvintes DOM manualmente com document.addEventListener(...), você pode esperar que eles capturem todos os eventos do React. No React 16 e anteriores, mesmo se você chamar e.stopPropagation() em um manipulador de eventos React, seus ouvintes de document personalizados ainda os receberão porque o evento nativo já está no nível do documento. No React 17, a propagação iria parar (conforme solicitado), portanto, seus manipuladores de document não disparariam:

document.addEventListener('click', function() {
  // This custom handler will no longer receive clicks
  // from React components that called e.stopPropagation()
});

Você pode corrigir um código como esse, convertendo seu ouvinte para usar a fase de captura. Para fazer isso, você pode passar { capture: true } como o terceiro argumento para document.addEventListener:

document.addEventListener('click', function() {
  // Now this event handler uses the capture phase,
  // so it receives *all* click events below!
}, { capture: true });

Note how this strategy is more resilient overall — for example, it will probably fix existing bugs in your code that happen when e.stopPropagation() is called outside of a React event handler. In other words, event propagation in React 17 works closer to the regular DOM.

Um resumo do React v17.0 Release Candidate

O React 17 parece bastante promissor, por mais que não vem com novos recursos, podemos esperar bastante dessa versão e superiores ao longo do tempo.

Importante:
Vale lembrar que é uma versão RC, por isso, não é recomendado instalar em produção.

Algumas mudanças revolucionárias, onde o React manteve as alterações significativas da versão 17 no mínimo. Por exemplo, eles não removeram nenhum dos métodos que foram descontinuados nas versões anteriores.

No entanto, incluíram algumas outras alterações importantes que são relativamente seguras, assim eles conseguiram um ganho muito grande, precisando ajustar menos de 20 componentes. UAUUUU 👏 👏 🙂

Fizeram algumas alterações menores relacionadas ao sistema de eventos.

Note
Although React 17 switched from focus to focusin under the hood for the onFocus event, note that this has not affected the bubbling behavior. In React, onFocus event has always bubbled, and it continues to do so in React 17 because generally it is a more useful default. See this sandbox for the different checks you can add for different particular use cases.

Removeram a otimização do “event pooling” que não melhorava o desempenho em navegadores modernos e confundia muitos usuários.

function handleChange(e) {
  setData(data => ({
    ...data,
    // This crashes in React 16 and earlier:
    text: e.target.value
  }));
}

In React 17, this code works as you would expect. The old event pooling optimization has been fully removed, so you can read the event fields whenever you need them.

Melhorando o useEffect

Houve melhoria no useEffect, tornando-o mais consistente.

useEffect(() => {
  // This is the effect itself.
  return () => {
    // This is its cleanup.
  };
});

A maioria dos efeitos não precisam atrasar as atualizações da tela, então o React os executa de forma assíncrona logo após a atualização ser refletida na tela.

However, the effect cleanup function, when it exists, used to run synchronously in React 16. We’ve found that, similar to componentWillUnmount being synchronous in classes, this is not ideal for larger apps because it slows down large screen transitions (e.g. switching tabs).

In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.

Quando acontece um erro no navegador, ele fornece um rastreamento de pilha com nomes de função JavaScript e seus locais. Porém, nem sempre isso é o suficiente. Desde a versão 16 o React começou a imprimir essas pilhas, que constumavam ser inferiores as pilhas nativas do JavaScript. Então, no React 17, as pilhas de componentes são geradas usando um mecanismo diferente que as une a partir das pilhas JavaScript nativas regulares. Isso permite obter os rastreamentos da pilha do componente React totalmente simbolizados em um ambiente de produção.

If you’re curious, you can read more details in this pull request, but for the most part this exact mechanism shouldn’t affect your code.

E por fim, removeram alguns componentes internos do React, em particular o React Native for Web que costumava depender de alguns componentes internos do sistema de eventos, mas essa dependência era frágil e costumava quebrar.

In React 17, these private exports have been removed. As far as we’re aware, React Native for Web was the only project using them, and they have already completed a migration to a different approach that doesn’t depend on those private exports.

Instalação do React v17.0 Release Candidate

O React está incentivando a todos a experimentar a versão React 17.0 Release Candidate em breve e leventar quaisquer questões para os problemas que você encontrar na migração.

Para instalar o React 17 RC com o NPM:

npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0

Para instalar o React 17 RC com Yarn:

yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0

É possível compilar o React via CDN:

<script crossorigin src="https://unpkg.com/react@17.0.0-rc.0/umd/react.production.min.js">
<script crossorigin src="https://unpkg.com/react-dom@17.0.0-rc.0/umd/react-dom.production.min.js">

Consulte a documentação para obter instruções detalhada de instalação.

Artigo escrito a partir do orginal do Blog do React.

Já somos mais de 1.3k de download.

Deixe seu comentário aí embaixo pra gente saber o que achou do artigo e também da nova versão do React.

Nós vamos começar a testar agora mesmo #partiu #coding

Fale sobre o React v17.0 Release Candidate

Você já testou o React v17.0 Release Candidate? O que está achando? Então deixe seu comentário.