React v17.0

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 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.

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

Upgrades Graduais

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.

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.

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ó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.

Nota

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.

Mudanças na Delegação do Evento

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.

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:

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

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ó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.

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

Outras Mudanças Importantes

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

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.

Nova transformação JSX

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.

React Native

O React Native tem uma programação de lançamento separada. Conseguimos o suporte para React 17 no React Native 0.64. Como sempre, você pode acompanhar as discussões de lançamento nos lançamentos da React Native Community rastreador de issues.

Instalação

Para instalar React 17 com npm, rode:

npm install react@17.0.0 react-dom@17.0.0

Para instalar React 17 com Yarn, rode:

yarn add react@17.0.0 react-dom@17.0.0

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

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

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

Changelog

React

• Adiciona react/jsx-runtime e react/jsx-dev-runtime para o new JSX transform. (@lunaruan em #18299)
• Crie pilhas de componentes a partir de frames de erro nativos. (@sebmarkbage em #18561)
• Permite especificar displayName no contexto para pilhas aprimoradas. (@eps1lon em #18224)
• Evita 'use strict' de vazamento nos pacotes UMD. (@koba04 em #19614)
• Para de usar fb.me para redirecionamentos. (@cylim em #19598)

React DOM

• Delega eventos aos roots em vez de document. (@trueadm em #18195 e others)
• Limpa todos os efeitos antes de executar os próximos efeitos. (@bvaughn em #17947)
• Roda useEffect limpando funções assíncronas. (@bvaughn em #17925)
• Usa o navegador focusin e focusout para onFocus e onBlur. (@trueadm em #19186)
• Faz com que eventos Capture usem a fase de captura do navegador. (@trueadm em #19221)
• Não imita o borbulhar do evento onScroll. (@gaearon em #19464)
• Lança se o componente forwardRef oumemo retornar ʻundefined`. (@gaearon em #19550)
• Remove o pool de eventos. (@trueadm em #18969)
• Para de expor detalhes internos que não serão necessários para o React Native Web. (@necolas em #18483)
• Anexa todos os ouvintes de eventos conhecidos quando o hoot for montado. (@gaearon em #19659)
• Desabilita console na segunda passagem de renderização do modo DEV, renderização dupla. (@sebmarkbage em #18547)
• Rejeita o não documentado e enganoso API do ReactTestUtils.SimulateNative. (@gaearon em #13407)
• Renomeia os nomes dos campos privados usados ​​nos internos. (@gaearon em #18377)
• Não chama a API User Timing no desenvolvimento. (@gaearon em #18417)
• Desabilita o console durante a renderização repetida no modo estrito. (@sebmarkbage em #18547)
• No Modo Estrito, os componentes de renderização dupla sem Hooks. (@eps1lon em #18430)
• Permite chamadas ReactDOM.flushSync durante os métodos de ciclo de vida (com aviso). (@sebmarkbage em #18759)
• Adiciona a propriedade code aos objetos de evento do teclado. (@bl00mber em #18287)
• Adiciona a propriedade disableRemotePlayback para elementos video. (@tombrowndev em #18619)
• Adiciona a propriedade enterKeyHint para elementos input. (@eps1lon em #18634)
• Avisa quando value não é fornecido para <Context.Provider>. (@charlie1404 em #19054)
• Avisa quando o componentememo ou forwardRef retorna undefined. (@bvaughn em #19550)
• Melhora a mensagem de erro para atualizações inválidas. (@JoviDeCroock em #18316)
• Exclui forwardRef e memo dos frames da pilha. (@sebmarkbage em #18559)
• Melhora a mensagem de erro ao alternar entre entradas controladas e não controladas. (@vcarl em #17070)
• Mantém onTouchStart, onTouchMove, e onWheel passivo. (@gaearon em #19654)
• Conserta setState em desenvolvimento dentro de um iframe fechado. (@gaearon em #19220)
• Corrige resgate de renderização para componentes lentos com defaultProps. (@jddxf em #18539)
• Corrige um aviso de falso positivo quando dangerouslySetInnerHTML é undefined. (@eps1lon em #18676)
• Corrige utilitários de teste fora do padrão de implementação require. (@just-boris em #18632)
• Corrige onBeforeInput relatando um incorreto event.type. (@eps1lon em #19561)
• Corrige event.relatedTarget relatado como undefined em Firefox. (@claytercek em #19607)
• Corrige “erro não especificado” em IE11. (@hemakshis em #19664)
• Corrige a renderização em uma sombra root. (@Jack-Works em #15894)
• Corrige movementX/Y polyfill com eventos de captura. (@gaearon em #19672)
• Usa delegação para onSubmit e onReset eventos. (@gaearon em #19333)
• Melhora o uso de memória. (@trueadm em #18970)

React DOM Server

• Torne o comportamento do useCallback consistente com ʻuseMemo` para o renderizador do servidor.(@alexmckenley em #18783)
• Corrige o vazamento de estado quando um componente de função é acionado. (@pmaccart em #19212)

React Test Renderer

• Melhora findByType mensagem de erro. (@henryqdineen em #17439)

Modo Simultâneo (Experimental)

• Renova as heurísticas de lote de prioridade. (@acdlite em #18796)
• Adiciona o prefixo unstable_ antes do experimental APIs. (@acdlite em #18825)
• Remove unstable_discreteUpdates e unstable_flushDiscreteUpdates. (@trueadm em #18825)
• Remove o argumento timeoutMs. (@acdlite em #19703)
• Desabilita pré-renderização <div hidden /> em favor de uma futura API diferente. (@acdlite em #18917)
• Adiciona unstable_expectedLoadTime ao Suspense para árvores vinculadas à CPU. (@acdlite in #19936)
• Adiciona um Hook experimental unstable_useOpaqueIdentifier. (@lunaruan em #17322)
• Adiciona uma API experimental unstable_startTransition. (@rickhanlonii em #19696)
• Usando act no renderizador de teste não libera mais fallbacks do Suspense. (@acdlite em #18596)
• Usa o tempo limite de renderização global para CPU Suspense. (@sebmarkbage em #19643)
• Limpa o conteúdo hoot existente antes da montagem. (@bvaughn em #18730)
• Corrige um bug com limites de erro. (@acdlite em #18265)
• Corrige um bug que causava atualizações perdidas em uma árvore suspensa. (@acdlite em #18384 e #18457)
• Corrige um bug que causava atualizações da fase de renderização perdidas (@acdlite em #18537)
• Corrige um bug em SuspenseList. (@sebmarkbage em #18412)
• Corrige um bug que fazia com que o substituto do Suspense fosse exibido muito cedo. (@acdlite em #18411)
• Corrige um bug com componentes de classe dentro de SuspenseList. (@sebmarkbage em #18448)
• Corrige um bug com inputs que pode fazer com que as atualizações sejam descartadas. (@jddxf em #18515 e @acdlite em #18535)
• Corrige um bug que fazia com que o recurso de suspensão do Suspense travasse. (@acdlite em #18663)
• Não corta a tail de uma SuspenseList se carregando informações. (@sebmarkbage em #18854)
• Conserta um bug em useMutableSource isso pode acontecer quando alteraçõesgetSnapshot. (@bvaughn em #18297)
• Corrige um sério bug em useMutableSource. (@bvaughn em #18912)
• Avisa se chamando setState fora da renderização, mas antes do commit. (@sebmarkbage em #18838)