Estamos felizes em anunciar o lançamento do React v16.0! Entre as mudanças estão algumas solicitações antigas de recursos, incluindo fragmentos, error boundaries, portais, suporte para atributos DOM customizados, aprimoramento na renderização de servidor e tamanho de arquivo reduzido.
\nAgora você pode retornar um array de elementos no método render de um componente. Assim como outros arrays, você precisará adicionar uma prop key para cada elemento para evitar um warning:
render() {\n // Não é mais necessário envolver os itens da lista em um elemento extra!\n return [\n // Não esqueça das keys :)\n <li key=\"A\">First item</li>,\n <li key=\"B\">Second item</li>,\n <li key=\"C\">Third item</li>,\n ];\n}A partir do React 16.2.0, foi adicionado ao JSX suporte a uma sintaxe especial de fragmento que não exige keys.
\nAdicionamos suporte para retornar strings também:
\nrender() {\n return 'Look ma, no spans!';\n}Veja a lista completa de tipos de retornos.
\nAnteriormente, erros de tempo de execução durante a renderização podiam colocar o React em um estado quebrado, produzindo mensagens de erro enigmáticas e exigindo uma atualização da página para recuperar. Para resolver esse problema, o React 16 usa uma estratégia de tratamento de erros mais resiliente. Por padrão, se um erro for lançado dentro dos métodos de renderização ou ciclo de vida de um componente, toda a árvore de componentes será desmontada da raiz. Isso impede a exibição de dados corrompidos. No entanto, provavelmente não é a experiência ideal para o usuário.
\nAo invés de desmontar a aplicação inteira toda vez que houver um erro, você pode usar error boundaries. Error Boundaries são componentes especiais que capturam erros dentro de sua subárvore e exibem uma UI de fallback em seu lugar. Pense que Error Boundaries são como instruções try-catch, mas para componentes React.
\nPara mais detalhes, veja nossa publicação anterior sobre gerenciamento de erros no React 16.
\nPortais fornecem uma maneira de primeira classe para renderizar componentes filhos em um nó do DOM que existe fora da hierarquia DOM do componente pai.
\nrender() {\n // React *não* criará uma nova div. Irá renderizar os filhos dentro de `domNode`.\n // `domNode` é qualquer nó DOM válido, independentemente de sua localização no DOM.\n return ReactDOM.createPortal(\n this.props.children,\n domNode,\n );\n}Veja um exemplo completo na documentação para portais.
\nFoi incluída no React 16 uma reescrita completa na renderização de servidor. É muito rápida. Suporta streaming, para que você possa enviar bytes para o cliente mais rapidamente. E graças a uma nova estratégia de empacotamento, que compila as verificações do process.env (acredite ou não, ler process.env no Node é muito lento!), você não precisa mais empacotar o React para ter boa performance em renderização de servidor.
Sasha Aickin, membro do Core Team escreveu um ótimo artigo descrevendo as melhorias de SSR no React 16. De acordo com os benchmarks feitos por Sasha, renderização de servidor no React 16 é aproximadamente três vezes mais rápido que no React 15. “Quando comparado ao React 15 com process.env compilado, há um ganho de 2.4x no Node 4, em torno de 3x de ganho de desempenho no Node 6, e uma completa melhoria de 3.8x no recém lançado Node 8.4. E se você comparar com o React 15 sem compilação, o React 16 tem um ganho de uma ordem de magnitude completa em SSR na versão mais recente do Node!” (Como destaca Sasha, lembre-se de que esses números são baseados em parâmetros de referência sintéticos e podem não refletir o desempenho do mundo real.)
Além disso, o React 16 é melhor para hidratar o HTML renderizado pelo servidor, assim que é entregue ao cliente. Não é mais necessário que a renderização inicial corresponda exatamente ao resultado do servidor. Em vez disso, tentará reutilizar o máximo possível do DOM existente. Chega de checksums! Em geral, não recomendamos que você processe conteúdo diferente no cliente e no servidor, mas ele pode ser útil em alguns casos (por exemplo, registros de data e hora). No entanto, é perigoso ter nós ausentes na renderização do servidor, pois isso pode causar a criação de nós irmãos com atributos incorretos.
\nVeja a documentação do ReactDOMServer para mais detalhes.
Ao invés de ignorar atributos HTML e SVG não reconhecidos, o React agora os passará para o DOM. Isso nos traz o benefício adicional de nos livrar da maioria da lista de permissões de atributos do React, resultando em tamanhos de arquivo reduzidos.
\nApesar de todas essas adições, o React 16 é realmente menor em comparação com 15.6.1!
\nreact agora é 5.3 kb (2.2 kb com gzip), antes era 20.7 kb (6.9 kb com gzip).react-dom agora é 103.7 kb (32.6 kb com gzip), antes era 141 kb (42.9 kb com gzip).react + react-dom agora são 109 kb (34.8 kb com gzip), antes eram 161.7 kb (49.8 kb com gzip).Isso equivale a uma redução do tamanho de 32% combinados em comparação com a versão anterior (30% após o gzip).
\nA diferença de tamanho é parcialmente atribuída a uma alteração no empacotamento. O React agora usa o Rollup para criar flat bundles para cada um de seus diferentes formatos de destino, resultando em ganhos tanto de tamanho como tempo de execução. O formato de flat bundle também significa que o impacto do React no tamanho do pacote é praticamente consistente, independentemente de como você disponibiliza seu aplicativo, seja com Webpack, Browserify, pacotes configuráveis UMD pré-criados ou qualquer outro sistema.
\nCaso você tenha perdido, React 16 está disponível sob a licença MIT. Nós também publicamos o React 15.6.2 sob a licença MIT, para aqueles que não podem atualizar imediatamente.
\nO React 16 é a primeira versão do React construída sobre uma nova arquitetura principal, codinome “Fiber”. Você pode ler tudo sobre esse projeto no blog de engenharia do Facebook. (Spoiler: reescrevemos React!)
\nFiber é responsável pela maior parte das novas funcionalidades no React 16, como error boundaries e fragmentos. Nos próximos lançamentos, vocês podem esperar por novas funcionalidades quando começarmos a desbloquear todo o potencial do React.
\nTalvez a área mais empolgante na qual estamos trabalhando seja a renderização assíncrona- uma estratégia para agendar cooperativamente o trabalho de renderização, liberando periodicamente a execução do navegador. O resultado é que, com a renderização assíncrona, os aplicativos serão mais responsivos porque o React evitará o bloqueio da main thread.
\nEsta demonstração fornece uma prévia dos tipos de problemas que a renderização assíncrona pode resolver:
\n\nEver wonder what "async rendering" means? Here's a demo of how to coordinate an async React tree with non-React work https://t.co/3snoahB3uV pic.twitter.com/egQ988gBjR
— Andrew Clark (@acdlite) September 18, 2017
Dica: Preste atenção no quadrado preto girando.
\nAcreditamos que a renderização assíncrona é importante e representa o futuro do React. Para tornar a migração para a v16.0 o mais suave possível, ainda não estamos habilitando nenhum recurso assíncrono, mas estamos animados em começar a liberá-los nos próximos meses. Fique ligado!
\nReact v16.0.0 está disponível no registro do npm.
\nPara instalar o React 16 com Yarn, execute:
\nyarn add react@^16.0.0 react-dom@^16.0.0Para instalar o React 16 com npm, execute:
\nnpm install --save react@^16.0.0 react-dom@^16.0.0Nós também fornecemos compilações UMD do React via CDN:
\n<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Consulte a documentação para instruções detalhadas de instalação.
\nEmbora o React 16 inclua mudanças internas significativas, em termos de atualização, você pode pensar nisso como qualquer outro grande lançamento do React. Estamos servindo o React 16 aos usuários do Facebook e do Messenger.com desde o início deste ano, e lançamos várias versões beta e candidata à produção para eliminar problemas adicionais. Com pequenas exceções, se sua aplicação rodar na versão 15.6 sem nenhum aviso, ele deverá funcionar na versão 16.
\nPara as depreciações listadas abaixo na seção empacotamento, codemods estão disponíveis para automaticamente atualizar seu código.\nConsulte a publicação 15.5.0 no blog para mais informações, ou pesquise por codemods no projeto react-codemod.
\nA hidratação de um contêiner renderizado pelo servidor agora possui uma API explícita. Se você está recebendo HTML renderizado no servidor, use ReactDOM.hydrate no lugar de ReactDOM.render. Continue usando ReactDOM.render apenas se você estiver fazendo renderização no cliente.
Como foi previamente anunciado, estamos descontinuando o suporte para React Addons. Esperamos que a versão mais recente de cada addon (exceto react-addons-perf; veja abaixo) funcione no futuro próximo, mas não publicaremos atualizações adicionais.
Consulte o anúncio anterior para obter sugestões de como migrar.
\nreact-addons-perf não mais funcionará no React 16. É provável o lançamento de uma nova versão desta ferramenta no futuro. Enquanto isso, você pode usar a ferramenta de análise de performance do seu navegador para perfilar os componentes React.
React 16 inclui várias pequenas quebras de compatibilidade. Elas afetam apenas casos de uso incomuns e não esperamos que eles quebrem a maioria das aplicações.
\nunstable_handleError. Este método foi renomeado para componentDidCatch. Você pode usar um codemod para migrar automaticamente para a nova API.ReactDOM.render e ReactDOM.unstable_renderSubtreeIntoContainer agora retornam null se forem chamados dentro de um método do ciclo de vida. Para evitar isso, você pode usar portais ou refs.setState:
setState com null não mais disparará uma atualização. Isto permite a você decidir em uma função de atualização se deseja re-renderizar.setState diretamente no render sempre causará uma atualização. Este não era o comportamento anterior. Independentemente, você não deve chamar o setState no render.setState (segundo argumento) agora é disparada imediatamente após o componentDidMount / componentDidUpdate em vez de depois que todos os componentes tenham renderizado.<A /> por <B />, B.componentWillMount agora será chamado sempre antes de A.componentWillUnmount. Anteriormente, A.componentWillUnmount poderia ser chamado antes em alguns casos.ReactDOM.unmountComponentAtNode. Veja este exemplo.componentDidUpdate não recebe mais o parâmetro prevContext. (Veja #8631)componentDidUpdate porque DOM refs não estão mais disponíveis. Isso também o torna consistente com o componentDidMount (que também não é chamado nas versões anteriores).unstable_batchedUpdates.ReactDOM.unstable_batchedUpdates agora recebe apenas um argumento extra após o retorno de chamada.react/lib/* e react-dom/lib/*. Mesmo em ambientes CommonJS, React e ReactDOM são pré-compilados para arquivos únicos (“flat bundles”). Se você usou alguma funcionalidade interna do React não documentada, e elas não funcionam mais, nos informe sobre seu caso específico em uma nova issue, que tentaremos descobrir uma estratégia de migração para você.react-with-addons.js. Todos os addons compatíveis serão publicados separadamente no npm, e terão versão de navegador de arquivo único caso necessite.React.createClass está disponível como create-react-class, React.PropTypes como prop-types, React.DOM como react-dom-factories, react-addons-test-utils como react-dom/test-utils, e shallow renderer como react-test-renderer/shallow. Consulte as publicações 15.5.0 e 15.6.0 no blog para obter instruções de migração de código e codemods.Os nomes e caminhos para as compilações de navegador de arquivo único foram alterados para enfatizar a diferença entre as compilações de desenvolvimento e produção. Por exemplo:
\nreact/dist/react.js → react/umd/react.development.jsreact/dist/react.min.js → react/umd/react.production.min.jsreact-dom/dist/react-dom.js → react-dom/umd/react-dom.development.jsreact-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.jsReact 16 depende dos tipos de coleção Map e Set. Se você suporta navegadores e dispositivos mais antigos que ainda não os fornecem nativamente (por exemplo, IE <11), considere incluir um polyfill global na compilação de sua aplicação, como core-js ou babel-polyfill.
\nUm ambiente para o React 16 usando polyfill do core-js para oferecer suporte a navegadores mais antigos deve se parecer com:
\nimport 'core-js/es6/map';\nimport 'core-js/es6/set';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n <h1>Hello, world!</h1>,\n document.getElementById('root')\n);React também depende de requestAnimationFrame (mesmo em ambientes de teste).
\nVocê pode usar o pacote raf para injetar requestAnimationFrame:
import 'raf/polyfill';Como sempre, este lançamento não seria possível sem nossos contribuidores de código aberto. Agradecemos a todos que reportaram problemas, abriram PRs, responderam às issues, escreveram documentação e muito mais!
\nAgradecimentos especiais para os nossos contribuidores oficiais, especialmente por seus esforços heróicos nas últimas semanas durante o ciclo de pré-lançamento: Brandon Dail, Jason Quense, Nathan Hunzaker e Sasha Aickin.
","excerpt":"Estamos felizes em anunciar o lançamento do React v16.0! Entre as mudanças estão algumas solicitações antigas de recursos, incluindo fragmentos, error boundaries, portais, suporte para atributos DOM customizados, aprimoramento na renderização de servidor e tamanho de arquivo reduzido. Novos tipos de retorno na renderização: fragmentos e strings Agora você pode retornar um array de elementos no método de um componente. Assim como outros arrays, você precisará adicionar uma prop key para cada…","frontmatter":{"title":"React v16.0","next":null,"prev":null,"author":[{"frontmatter":{"name":"Andrew Clark","url":"https://twitter.com/acdlite"}}]},"fields":{"date":"26 de setembro de 2017","path":"content/blog/2017-09-26-react-v16.0.md","slug":"/blog/2017/09/26/react-v16.0.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/2017/09/26/react-v16.0.html"}},"staticQueryHashes":[]}