diff --git a/content/blog/2016-11-16-react-v15.4.0.md b/content/blog/2016-11-16-react-v15.4.0.md index 4c9284595..2e586a625 100644 --- a/content/blog/2016-11-16-react-v15.4.0.md +++ b/content/blog/2016-11-16-react-v15.4.0.md @@ -3,49 +3,49 @@ title: "React v15.4.0" author: [gaearon] --- -Today we are releasing React 15.4.0. +Hoje nós estamos lançando React 15.4.0. -We didn't announce the [previous](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it. +Nós não anunciamos os [lançamentos](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) [menores](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [anteriores](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) no blog porque a maioria das alterações foram correções de bugs. Entretanto, 15.4.0 é uma versão especial, e nós gostaríamos de destacar algumas mudanças notáveis. -### Separating React and React DOM {#separating-react-and-react-dom} +### Separando React e React DOM {#separating-react-and-react-dom} -[More than a year ago](/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom), we started separating React and React DOM into separate packages. We deprecated `React.render()` in favor of `ReactDOM.render()` in React 0.14, and removed DOM-specific APIs from `React` completely in React 15. However, the React DOM implementation still [secretly lived inside the React package](https://www.reddit.com/r/javascript/comments/3m6wyu/found_this_line_in_the_react_codebase_made_me/cvcyo4a/). +[Há mais de um ano atrás](/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom), nós começamos a separar o React e React DOM em pacotes separados. Nós descontinuamos o `React.render()` a favor do `ReactDOM.render()` no React 0.14, e removemos APIs específicas do DOM do `React` completamente no React 15. Entretanto, a implementação do React DOM ainda [viveu secretamente dentro do pacote do React]((https://www.reddit.com/r/javascript/comments/3m6wyu/found_this_line_in_the_react_codebase_made_me/cvcyo4a/)). -In React 15.4.0, we are finally moving React DOM implementation to the React DOM package. The React package will now contain only the renderer-agnostic code such as `React.Component` and `React.createElement()`. +No React 15.4.0, nós estamos finalmente movendo a implementação do React DOM para o pacote do React DOM. O pacote do React agora irá conter apenas o código "renderer-agnostic" tal como `React.Component` e `React.createElement()`.' -This solves a few long-standing issues, such as [errors](https://github.com/facebook/react/issues/7386) when you import React DOM in the same file as the [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) renderer. +Isso resolve algumas questões de longa data, tais como [erros](https://github.com/facebook/react/issues/7386) quando você importa o React DOM no mesmo arquivo que o renderizador do [teste snapshot]((https://facebook.github.io/jest/blog/2016/07/27/jest-14.html)). -**If you only use the official and documented React APIs you won't need to change anything in your application.** +**Se você utilizar apenas as APIs oficiais e documentadas do React você não precisará mudar nada na sua aplicação.** -However, there is a possibility that you imported private APIs from `react/lib/*`, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better. +Entretanto, existe uma possibilidade de você ter importado APIs privadas de `react/lib/*`, ou que um pacote que você confia usá-las. Gostaríamos de lembrar que isso nunca foi suportado, e que as suas aplicações não devem confiar em APIs internas. As partes internas do React irão continuar mudando conforme nós trabalhamos para melhorar o React. -Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler. We don't recommend using React DOM Server on the client in most cases. +Outra coisa a observar é que o React DOM Server agora tem o mesmo tamanho que o React DOM uma vez que ele contém a própria cópia do React reconciler. Nós não recomendamos usar React DOM Server no lado do cliente na maioria dos casos. -### Profiling Components with Chrome Timeline {#profiling-components-with-chrome-timeline} +### Perfilizando Componentes com a Timeline do Chrome {#profiling-components-with-chrome-timeline} -You can now visualize React components in the Chrome Timeline. This lets you see which components exactly get mounted, updated, and unmounted, how much time they take relative to each other. +Agora você pode visualizar os componentes React na Timeline do Chrome. Isso permite que você veja exatamente quais componentes são montados, atualizados, e desmontados e quanto tempo eles levam em relação aos outros. React components in Chrome timeline -To use it: +Para usá-lo: -1. Load your app with `?react_perf` in the query string (for example, `http://localhost:3000/?react_perf`). +1. Carregue sua aplicação com `?react_perf` na query string (por exemplo, `http://localhost:3000/?react_perf`) -2. Open the Chrome DevTools **Timeline** tab and press **Record**. +2. Abra a aba **Timeline** no Chrome DevTools e pressione **Gravar**. -3. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang. +3. Execute as ações que você deseja perfilizar. Não grave mais de 20 segundos ou o Chrome poderá travar. -4. Stop recording. +4. Pare de gravar. -5. React events will be grouped under the **User Timing** label. +5. Os eventos do React serão agrupados debaixo do campo **Tempo do Usuário** -Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur. +Perceba que os números são relativos então os componentes irão renderizar mais rápido em produção. Ainda assim, isso deve ajudar você a perceber quando a UI não relacionada é atualizada por um erro, quão profundas e com qual frequência as atualizações da sua UI ocorrem. -Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it. +Atualmente o Chrome, Edge, e o IE são os únicos navegadores dando suporte à essa funcionalidade, mas nós utilizamos a [API de Tempo de Usuário](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) padrão, então nós esperamos que mais browsers dêem suporte à ela. -### Mocking Refs for Snapshot Testing {#mocking-refs-for-snapshot-testing} +### Simulando Referências para Testes Snapshot {#mocking-refs-for-snapshot-testing} -If you're using Jest [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html), you might have had [issues](https://github.com/facebook/react/issues/7371) with components that rely on refs. With React 15.4.0, we introduce a way to provide mock refs to the test renderer. For example, consider this component using a ref in `componentDidMount`: +Se você está usando Jest [testes snapshot](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html), você pode ter tido [problemas](https://github.com/facebook/react/issues/7371) com componentes que dependem de referências. Com React 15.4.0, nós introduzimos uma maneira para prover simulações de referências para o renderizador de testes. Por exemplo, considere esse componente usando uma referência em `componentDidMount`: ```js{5,11} import React from 'react'; @@ -65,7 +65,7 @@ export default class MyInput extends React.Component { } ``` -With snapshot renderer, `this.input` will be `null` because there is no DOM. React 15.4.0 lets us avoid such crashes by passing a custom `createNodeMock` function to the snapshot renderer in an `options` argument: +Com o renderizador de teste snapshot, `this.input` será `null` porque não tem o DOM. React 15.4.0 nos permite evitar tais falhas passando uma função `createNodeMock` customizada para o renderizador do teste snapshot no argumento `options`: ```js{5-12,16} import React from 'react'; @@ -88,87 +88,88 @@ it('renders correctly', () => { }); ``` -We would like to thank [Brandon Dail](https://github.com/Aweary) for implementing this feature. +Nós gostaríamos de agradecer à [Brandon Dail](https://github.com/Aweary) por implementar esse recurso. -You can learn more about snapshot testing in [this Jest blog post](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html). +Você pode aprender mais sobre testes snapshot [nesse post no blog do Jest](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html). --- -## Installation {#installation} +## Instalação {#installation} -We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started. +Nós recomendamos utilizar [Yarn](https://yarnpkg.com/) ou [npm](https://www.npmjs.com/) para gerenciar as dependências do front-end. Se você é novo nos gerenciadores de pacotes, a [documentação do Yarn](https://yarnpkg.com/en/docs/getting-started) é um bom lugar para começar. -To install React with Yarn, run: +Para instalar React com Yarn, rode: ```bash yarn add react@15.4.0 react-dom@15.4.0 ``` -To install React with npm, run: +Para instalar React com npm, rode: ```bash npm install --save react@15.4.0 react-dom@15.4.0 ``` -We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time. +Nós recomendamos o uso de um bundler como o [webpack](https://webpack.js.org/) ou [Browserify](http://browserify.org/) para que você possa escrever código modular e empacotá-lo em pequenos pacotes para otimizar o tempo de carregamento. -Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/docs/installation.html#development-and-production-versions). +Lembre-se de que por padrão, o React executa verificações extras e fornece avisos úteis no modo de desenvolvimento. Quando publicar sua aplicação, tenha certeza de [compilá-lo em modo de produção](/docs/installation.html#development-and-production-versions). -In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page: +Caso você não utilize um bundler, nós também fornecemos bundlers pré-buildados nos pacotes npm que você pode [incluir como tags de script](/docs/installation.html#using-a-cdn) na sua página: * **React** - Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.4.0/dist/react.js) - Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.4.0/dist/react.min.js) -* **React with Add-Ons** - Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.js) - Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.min.js) -* **React DOM** (include React in the page before React DOM) - Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.js) - Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.min.js) -* **React DOM Server** (include React in the page before React DOM Server) - Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.js) - Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.min.js) - -We've also published version `15.4.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower. + Compilação de desenvolvimento com avisos: [react/dist/react.js](https://unpkg.com/react@15.4.0/dist/react.js) + Compilação minificada para produção: [react/dist/react.min.js](https://unpkg.com/react@15.4.0/dist/react.min.js) +* **React com Add-Ons** + Compilação de desenvolvimento com avisos: [react/dist/react-with-addons.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.js) + Compilação minificada para produção: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.min.js) +* **React DOM** (incluir React na página antes do React DOM) + Compilação de desenvolvimento com avisos: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.js) + Compilação minificada para produção: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.min.js) +* **React DOM Server** (incluir React na página antes do React DOM Server) + Compilação de desenvolvimento com avisos: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.js) + Compilação minificada para produção: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.min.js) + +Também publicamos a versão `15.4.0` do `react`, `react-dom`, e pacotes addons no npm e no pacote do `react` no bower. - - - ## Changelog {#changelog} ### React {#react} -* React package and browser build no longer "secretly" includes React DOM. - ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168)) -* Required PropTypes now fail with specific messages for null and undefined. - ([@chenglou](https://github.com/chenglou) in [#7291](https://github.com/facebook/react/pull/7291)) -* Improved development performance by freezing children instead of copying. - ([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455)) +* Pacote do React e compilação do browser +* O pacote do React e a compilação do navegador não incluem mais "secretamente" o React DOM. + ([@sebmarkbage](https://github.com/sebmarkbage) em [#7164](https://github.com/facebook/react/pull/7164) e [#7168](https://github.com/facebook/react/pull/7168)) +* PropTypes necessárias agora falham com mensagens específicas para null e undefined. + ([@chenglou](https://github.com/chenglou) em [#7291](https://github.com/facebook/react/pull/7291)) +* Melhor performance de desenvolvimento congelando elementos filhos ao invés de copiar. + ([@keyanzhang](https://github.com/keyanzhang) em [#7455](https://github.com/facebook/react/pull/7455)) ### React DOM {#react-dom} -* Fixed occasional test failures when React DOM is used together with shallow renderer. - ([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097)) -* Added a warning for invalid `aria-` attributes. - ([@jessebeach](https://github.com/jessebeach) in [#7744](https://github.com/facebook/react/pull/7744)) -* Added a warning for using `autofocus` rather than `autoFocus`. - ([@hkal](https://github.com/hkal) in [#7694](https://github.com/facebook/react/pull/7694)) -* Removed an unnecessary warning about polyfilling `String.prototype.split`. - ([@nhunzaker](https://github.com/nhunzaker) in [#7629](https://github.com/facebook/react/pull/7629)) -* Clarified the warning about not calling PropTypes manually. +* Corrigidas falhas ocasionais de testes quando o React DOM é utilizado em conjunto com o renderizador superficial. + ([@goatslacker](https://github.com/goatslacker) em [#8097](https://github.com/facebook/react/pull/8097)) +* Adicionado um aviso para atributos `aria-` inválidos. + ([@jessebeach](https://github.com/jessebeach) em [#7744](https://github.com/facebook/react/pull/7744)) +* Adicionado um aviso para usar `autofocus` ao invés de `autoFocus` + ([@hkal](https://github.com/hkal) em [#7694](https://github.com/facebook/react/pull/7694)) +* Removido todos os avisos desnecessários sobre "polyfilling" `String.prototype.splite`Removed an unnecessary warning about polyfilling `String.prototype.split`. + ([@nhunzaker](https://github.com/nhunzaker) em [#7629](https://github.com/facebook/react/pull/7629)) +* Aviso esclarecido sobre não chamar PropTypes manualmente. ([@jedwards1211](https://github.com/jedwards1211) in [#7777](https://github.com/facebook/react/pull/7777)) -* The unstable `batchedUpdates` API now passes the wrapped function's return value through. - ([@bgnorlov](https://github.com/bgnorlov) in [#7444](https://github.com/facebook/react/pull/7444)) -* Fixed a bug with updating text in IE 8. - ([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832)) +* A API instável `batchedUpdates` agora passa o valor de retorno através da função empacotada. + ([@bgnorlov](https://github.com/bgnorlov) em [#7444](https://github.com/facebook/react/pull/7444)) +* Corrigido um bug ao atualizar um texto no IE 8. + ([@mnpenner](https://github.com/mnpenner) em [#7832](https://github.com/facebook/react/pull/7832)) ### React Perf {#react-perf} -* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline. - ([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549)) +* Quando o ReactPerf é iniciado, agora você pode visualizar o tempo relativo gasto em componentes na forma de um gráfico na linha do tempo do Chrome. + ([@gaearon](https://github.com/gaearon) em [#7549](https://github.com/facebook/react/pull/7549)) ### React Test Utils {#react-test-utils} -* If you call `Simulate.click()` on a `` then `foo` will get called whereas it didn't before. - ([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642)) +* Se você chamar `Simulate.click()` em um `` então `foo` será chamado ao contrário de antes. + ([@nhunzaker](https://github.com/nhunzaker) em [#7642](https://github.com/facebook/react/pull/7642)) ### React Test Renderer {#react-test-renderer} -* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file. - ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168)) -* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing. - ([@Aweary](https://github.com/Aweary) in [#7649](https://github.com/facebook/react/pull/7649) and [#8261](https://github.com/facebook/react/pull/8261)) +* Devido a alterações no empacotamento, ele não trava mais quando é importado junto com o React DOM no mesmo arquivo. + ([@sebmarkbage](https://github.com/sebmarkbage) em [#7164](https://github.com/facebook/react/pull/7164) e [#7168](https://github.com/facebook/react/pull/7168)) +* `ReactTestRenderer.create()` agora aceita `{createNodeMock: element => mock}` como um argumento opcional então você pode simular referências com os testes snapshot. + ([@Aweary](https://github.com/Aweary) em [#7649](https://github.com/facebook/react/pull/7649) e [#8261](https://github.com/facebook/react/pull/8261))