diff --git a/content/blog/2016-04-07-react-v15.md b/content/blog/2016-04-07-react-v15.md index c847aa9d5..6a93bc4a8 100644 --- a/content/blog/2016-04-07-react-v15.md +++ b/content/blog/2016-04-07-react-v15.md @@ -3,257 +3,256 @@ title: "React v15.0" author: [gaearon] --- -We would like to thank the React community for reporting issues and regressions in the release candidates on our [issue tracker](https://github.com/facebook/react/issues/). Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15. +Gostaríamos de agradecer à comunidade React por continuar relatando os problemas e regressões encontrados nos candidatos a release em nosso [registro de erros](https://github.com/facebook/react/issues/). Nas últimas semanas, corrigimos os problemas encontrados e, agora, após dois candidatos a release, estamos empolgados para finalmente lançar a versão estável do React 15. -As a reminder, [we’re switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8. +Como lembrete, [estamos mudando para as principais versões](/blog/2016/02/19/new-versioning-scheme.html) para indicar que estamos usando o React em produção há muito tempo. O release 15.0 segue o 0.14 anterior e continuaremos a seguir esse versionamento semântico como fazemos desde 2013. É importante também notar que [não temos mais suporte ativo para o Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). Acreditamos que o React funcionará na sua forma atual, mas não priorizaremos nenhum esforço para corrigir novos problemas que afetam apenas o IE8. -React 15 brings significant improvements to how we interact with the DOM: +O React 15 traz melhorias significativas na maneira como interagimos com o DOM: -* We are now using `document.createElement` instead of setting `innerHTML` when mounting components. This allows us to get rid of the `data-reactid` attribute on every node and make the DOM lighter. Using `document.createElement` is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page. +* Agora usamos `document.createElement` ao invés de `innerHTML` ao montar componentes. Isso nos livra do atributo `data-reactid` em todos os nós e torna o DOM mais leve. O uso de `document.createElement` também é mais rápido nos navegadores modernos e corrige vários casos extremos relacionados a elementos SVG e a execução de várias cópias do React na mesma página. -* Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we [added support for all the SVG attributes that are recognized by today’s browsers](https://github.com/facebook/react/pull/6243). If we missed any of the attributes you’d like to use, please [let us know](https://github.com/facebook/react/issues/1657). As a bonus, thanks to using `document.createElement`, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15. +* Em termos históricos, nosso suporte ao SVG foi incompleto e muitas tags e atributos estavam ausentes. Ouvimos você e, no React 15, [adicionamos suporte a todos os atributos SVG reconhecidos pelos navegadores atuais](https://github.com/facebook/react/pull/6243). Se esquecemos algum atributo que você gostaria de usar, por favor, [nos informe](https://github.com/facebook/react/issues/1657). Como bônus, graças ao uso do `document.createElement`, não precisamos mais manter uma lista de tags SVG; portanto, quaisquer tags SVG que anteriormente não eram compatíveis devem funcionar normalmente no React 15. -* We received some amazing contributions from the community in this release, and we would like to highlight [this pull request](https://github.com/facebook/react/pull/5753) by [Michael Wiencek](https://github.com/mwiencek) in particular. Thanks to Michael’s work, React 15 no longer emits extra `` nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution. +* Recebemos algumas contribuições surpreendentes da comunidade nessa release e gostaríamos de destacar em particular [essa pull request](https://github.com/facebook/react/pull/5753) do [Michael Wiencek](https://github.com/mwiencek). Graças ao trabalho do Michael, o React 15 não emite mais extra `` nós ao redor do texto, tornando o resultado do DOM muito mais limpo. Esse era um incômodo antigo dos usuários do React, por isso é tão legal que essa mudança seja uma contribuição externa. -While this isn’t directly related to the release, we understand that in order to receive more community contributions like Michael’s, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing [React core team weekly meeting notes](https://github.com/reactjs/core-notes) again. We also intend to introduce an RFC process inspired by [Ember RFCs](https://github.com/emberjs/rfcs) so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog. +Embora não esteja diretamente relacionado ao release, entendemos que, para receber mais contribuições da comunidade como a contribuição de Michael, precisamos comunicar nossas metas e prioridades abertamente e revisar as solicitações de recebimento de forma mais decisiva. Como primeiro passo, começamos a publicar novamente as [Notas da reunião semanal do React Core Team](https://github.com/reactjs/core-notes). Também pretendemos introduzir um processo RFC inspirado nos [Ember RFCs](https://github.com/emberjs/rfcs) para que colaboradores externos possam ter mais conhecimento e influência no desenvolvimento futuro do React. Manteremos você atualizado sobre tudo em nosso blog. -We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful! +Também estamos experimentando um novo formato de registro de alterações neste post. Agora, todas as alterações são vinculadas à pull request correspondente e mencionam o autor. Se você vê utilidade nisso, fala pra gente. -## Upgrade Guide {#upgrade-guide} +## Guia de Atualização {#upgrade-guide} -As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain. +Como de costume em grandes releases, o React 15 removerá o suporte para alguns dos padrões descontinuados nove meses atrás no React 0.14. Sabemos que as alterações podem ser dolorosas (o código do Facebook tem mais de 20.000 componentes do React, isso sem contar do React Native). Por isso, sempre tentamos fazer alterações graduais para minimizar a dor. -If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases. +Se o seu código não apresentar avisos ao ser executado no React 0.14, a atualização deverá ser bem mais fácil. A maior parte das mudanças neste release estão realmente nos bastidores, impactando a maneira como o React interage com o DOM. A outra mudança substancial é que o React agora suporta toda a gama de elementos e atributos SVG. Além disso, temos um grande número de melhorias incrementais e avisos adicionais destinados a ajudar os desenvolvedores. Também solidificamos a nossa base para fornecer novos recursos em futuros releases. -See the changelog below for more details. +Veja o registro de mudanças abaixo para mais detalhes. -## Installation {#installation} +## Instalação {#installation} -We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages: +Recomendamos a instalação do React com o gerenciador de pacotes `npm` e o uso de uma ferramenta como o browserify ou o webpack para criar o seu código em um único bundle. Para instalar os dois pacotes: * `npm install --save react react-dom` -Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster. +Lembre-se de que, por padrão, o React executa verificações extras e fornece avisos no modo de desenvolvimento. Ao fazer deploy do seu aplicativo, defina a variável de ambiente `NODE_ENV` como` production` para usar a construção de produção do React, que não inclui os avisos de desenvolvimento e executa mais rápido. -If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower. +Se você ainda não tem como usar o `npm`, fornecemos versões pré-construídas do navegador para sua conveniência, que também estão disponíveis no pacote` react` no navegador. * **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **React DOM** (include React in the page before React DOM) - Dev build with warnings: - Minified build for production: + Versão de desenvolvimento com avisos: + Versão minificada para producão: +* **React com Add-Ons** + Versão de desenvolvimento com avisos: + Versão minificada para producão: +* **React DOM** (inclua React na página antes do React DOM) + Versão de desenvolvimento com aviso: + Versão minificada para producão: ## Changelog {#changelog} -### Major changes {#major-changes} +### Principais mudanças {#major-changes} -- #### `document.createElement` is in and `data-reactid` is out +- #### `document.createElement` é mantido e `data-reactid` está fora - There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we’ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node. + Aconteceram várias mudanças grandes na forma como interagimos com o DOM. Uma das mudanças mais notáveis é que não definimos mais o atributo `data-reactid` para cada nó do DOM. Embora essa mudança torne mais difícil saber se um site está usando o React, a vantagem é que o DOM fica muito mais leve. Essa alteração foi possível ao escolhermos o uso de `document.createElement` na renderização inicial. Anteriormente, gerávamos uma grande string de HTML e, em seguida, definíamos `node.innerHTML`. Na época, decidiu-se que essa abordagem era mais rápida do que usar `document.createElement` para a maioria dos casos e navegadores compatíveis. Mas os navegadores continuaram a melhorar tanto que a razão por trás da nossa abordagem inicial não é mais verdadeira. Ao usar `createElement`, podemos fazer com que outras partes do React fiquem mais rápidas. Os IDs foram usados para mapear os eventos para o componente React original, o que significa que tínhamos que fazer muita coisa em todos os eventos, mesmo já tendo esses dados armazenados em cache. Como todos já vimos, o armazenamento em cache e, em particular, a invalidação de caches, podem ser propensos a erros e, como resultado, vimos muitos problemas difíceis de serem reproduzidos. Agora podemos construir um mapeamento direto no momento da renderização, já que já temos um identificador no nó. + + ** Nota: ** `data-reactid` ainda está presente no conteúdo renderizado pelo servidor, no entanto, é muito menor do que antes e é agora é simplesmente um contador de incremento automático. + + [@sophiebits](https://github.com/sophiebits) em [#5205](https://github.com/facebook/react/pull/5205) - **Note:** `data-reactid` is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter. +- #### Não há mais `` s extras - [@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205) + Outra grande mudança na nossa interação com o DOM é como processamos blocos de texto. Anteriormente, você deve ter notado que o React renderizava muitos `` s extras. Por exemplo, em nosso exemplo mais básico na página inicial, renderizamos `
Olá {this.props.name}
`, resultando em uma marcação que continha 2 `` s. Agora, renderizaremos nós de texto sem formatação intercaladas com nós de comentários usados para demarcação. Isso nos dá a capacidade de atualizar partes de texto individuais sem criar extras nós aninhados. Pouquíssimas pessoas dependiam da marcação gerada aqui; portanto, é provável que você não seja impactado. No entanto, se você estava direcionando esses `` s em seu CSS, precisará ajustar de acordo. Você sempre pode processá-los explicitamente em seus componentes. + + [@mwiencek](https://github.com/mwiencek) em [#5753](https://github.com/facebook/react/pull/5753) -- #### No more extra ``s +- #### Renderizar `null` agora usa nós de comentários - Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra ``s. For example, in our most basic example on the home page we render `
Hello {this.props.name}
`, resulting in markup that contained 2 ``s. Now we’ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it’s likely you are not impacted. However if you were targeting these ``s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. + Também usamos esses nós de comentários para alterar o que o "null" renderiza. Renderizar `null` foi um recurso que adicionamos no React 0.11 e foi implementado renderizando elementos`