{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2020/10/20/react-v17.html","result":{"data":{"markdownRemark":{"html":"

Hoje, nós estamos lançando o React 17! Escrevemos longamente sobre o papel da versão React 17 e as mudanças que ele contém na postagem do blog React 17 RC. Este post é um breve resumo dele, então se você já leu o post RC, você pode pular este.

\n

Sem novos recursos

\n

A versão React 17 é incomum porque não adiciona nenhum novo recurso voltado para o desenvolvedor. Em vez disso, este lançamento está focado principalmente em tornar mais fácil atualizar o próprio React.

\n

Em particular, o React 17 é uma versão de “trampolim” que torna mais seguro incorporar uma árvore gerenciada por uma versão do React dentro de uma árvore gerenciada por uma versão diferente do React.

\n

Também torna mais fácil incorporar o React a aplicativos desenvolvidos com outras tecnologias.

\n

Upgrades Graduais

\n

O React 17 permite atualizações graduais do React. Quando você atualiza do React 15 para o 16 (ou, desta vez, do React 16 para o 17), normalmente atualiza o aplicativo inteiro de uma vez. Isso funciona bem para muitos 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. E embora seja possível usar duas versões do React na página, até o React 17 isso era frágil e causava problemas com eventos.

\n

Estamos corrigindo muitos desses problemas com o React 17. Isso significa que quando React 18 e as próximas versões futuras forem lançadas, você terá mais opções. A primeira opção será atualizar todo o seu aplicativo de uma vez, como você pode ter feito antes. Mas você também terá a opção de atualizar seu aplicativo peça por peça. Por exemplo, você pode decidir migrar a maior parte do seu aplicativo para o React 18, mas manter algumas caixas de diálogo carregadas lentamente ou um sub-rota no React 17.

\n

Isso não significa você precise fazer atualizações graduais. Para a maioria dos aplicativos, atualizar tudo de uma vez ainda é a melhor solução. Carregar duas versões do React - mesmo se uma delas for carregada lentamente sob demanda - ainda não é o ideal. No entanto, para aplicativos maiores que não são mantidos ativamente, faz sentido considerar essa opção, e o React 17 permite que esses aplicativos não sejam deixados para trás.

\n

Nós preparamos um repositório de exemplo demonstrando como carregar lentamente uma versão anterior do React, se necessário. Esta demonstração usa Create React App, mas deve ser possível seguir uma abordagem semelhante com qualquer outra ferramenta. Aceitamos demonstrações usando outras ferramentas como pull requests.

\n
\n

Nota

\n

Adiamos outras mudanças até depois do React 17. O objetivo desta versão é permitir atualizações graduais. Se atualizar para React 17 fosse muito difícil, isso iria contra o seu propósito.

\n
\n

Mudanças na Delegação do Evento

\n

Para permitir atualizações graduais, precisamos fazer algumas mudanças no sistema de eventos React. O React 17 é um grande lançamento porque essas alterações são potencialmente prejudiciais. Você pode conferir nosso FAQ de versionamento para saber mais sobre nosso compromisso com a estabilidade.

\n

No React 17, o React não anexará mais manipuladores de eventos no nível do documento sob o hood. Em vez disso, ele os anexará ao contêiner root DOM no qual sua árvore React é renderizada:

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

No React 16 e anteriores, o React faria document.addEventListener() para a maioria dos eventos. React 17 ligará rootNode.addEventListener() sob o hood em vez disso.

\n

\n \n \n \n \n \n \n \n \n \n

\n

Nós confirmamos que numerosos problemas relatados sobre os anos na nossa issue rastreador relacionadas à integração do React com o código não React foram corrigidas pelo novo comportamento.

\n

Se você tiver problemas com essa mudança, aqui está uma maneira comum de resolvê-los.

\n

Outras Mudanças Importantes

\n

O post do blog React 17 RC descreve o resto das mudanças significativas no React 17.

\n

Só tivemos que mudar menos de vinte componentes de mais de 100.000 no código de produto do Facebook para trabalhar com essas mudanças, então esperamos que a maioria dos aplicativos possa atualizar para React 17 sem muitos problemas. Por favor nos conte se você tiver problemas.

\n

Nova transformação JSX

\n

React 17 apoia a nova transformação JSX. Também fizemos backport para ele para React 16.14.0, React 15.7.0 e 0.14.10. Observe que é totalmente opcional e você não precisa usá-lo. A transformação JSX clássica continuará funcionando e não há planos de deixar de suportá-la.

\n

React Native

\n

O React Native tem uma programação de lançamento separada. Atualmente esperamos que o suporte para React 17 chegue no React Native 0.65, mas a versão exata está sujeita a alterações. Como sempre, você pode acompanhar as discussões de lançamento nos lançamentos da React Native Community rastreador de issues.

\n

Instalação

\n

Para instalar React 17 com npm, rode:

\n
npm install react@17.0.0 react-dom@17.0.0
\n

Para instalar React 17 com Yarn, rode:

\n
yarn add react@17.0.0 react-dom@17.0.0
\n

Também fornecemos compilações UMD do React por meio de um CDN:

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

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

\n

Changelog

\n

React

\n\n

React DOM

\n\n

React DOM Server

\n\n

React Test Renderer

\n\n

Modo Simultâneo (Experimental)

\n","excerpt":"Hoje, nós estamos lançando o React 17! Escrevemos longamente sobre o papel da versão React 17 e as mudanças que ele contém na postagem do blog React 17 RC. Este post é um breve resumo dele, então se você já leu o post RC, você pode pular este. Sem novos recursos A versão React 17 é incomum porque não adiciona nenhum novo recurso voltado para o desenvolvedor. Em vez disso, este lançamento está focado principalmente em tornar mais fácil atualizar o próprio React. Em particular, o React 17 é uma…","frontmatter":{"title":"React v17.0","next":null,"prev":null,"author":[{"frontmatter":{"name":"Dan Abramov","url":"https://twitter.com/dan_abramov"}},{"frontmatter":{"name":"Rachel Nabors","url":"https://twitter.com/rachelnabors"}}]},"fields":{"date":"20 de outubro de 2020","path":"content/blog/2020-10-20-react-v17.md","slug":"/blog/2020/10/20/react-v17.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2020/10/20/react-v17.html"}},"staticQueryHashes":[]}