From 47912dae568fabe136892681e5198d4be11bc920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Felipe=20Gon=C3=A7alves?= <23662020+lffg@users.noreply.github.com> Date: Fri, 8 Feb 2019 22:52:24 -0200 Subject: [PATCH 01/18] Translate strict-mode.md to pt-BR --- content/docs/strict-mode.md | 106 ++++++++++++++++++------------------ 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 8d2752b35..790a5eb05 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -1,65 +1,65 @@ --- id: strict-mode -title: Strict Mode +title: Modo Estrito permalink: docs/strict-mode.html --- -`StrictMode` is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode` does not render any visible UI. It activates additional checks and warnings for its descendants. +O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais problemas em uma aplicação. Assim como o `Fragment`, o `StrictMode` não renderiza nenhum elemento visível na interface. Ele ativa, no entanto, verificações e avisos adicionais para os seus componentes filhos. -> Note: +> Nota: > -> Strict mode checks are run in development mode only; _they do not impact the production build_. +> Verificações do modo estrito são executadas somente em modo de desenvolvimento; _elas não impactam na build de produção_. -You can enable strict mode for any part of your application. For example: +Você pode habilitar o modo estrito para qualquer parte da sua aplicação, por exemplo: `embed:strict-mode/enabling-strict-mode.js` -In the above example, strict mode checks will *not* be run against the `Header` and `Footer` components. However, `ComponentOne` and `ComponentTwo`, as well as all of their descendants, will have the checks. +No exemplo acima, as verificações do modo estrito não serão executadas nos componentes `Header` e `Footer`. No entanto, `ComponentOne` e `ComponentTwo`, assim como todos os seus componentes filhos, serão verificados. -`StrictMode` currently helps with: -* [Identifying components with unsafe lifecycles](#identifying-unsafe-lifecycles) -* [Warning about legacy string ref API usage](#warning-about-legacy-string-ref-api-usage) -* [Warning about deprecated findDOMNode usage](#warning-about-deprecated-finddomnode-usage) -* [Detecting unexpected side effects](#detecting-unexpected-side-effects) -* [Detecting legacy context API](#detecting-legacy-context-api) +O modo estrito ajuda atualmente com: +* [Identificar componentes com métodos de ciclo de vida inseguros](#identifying-unsafe-lifecycles) +* [Avisos em relação ao uso da antiga string ref API](#warning-about-legacy-string-ref-api-usage) +* [Avisos em relação ao uso do depreciado findDOMNode](#warning-about-deprecated-finddomnode-usage) +* [Detectar efeitos colaterais (side effects) inesperados](#detecting-unexpected-side-effects) +* [Detectar o uso da antiga API de contexto](#detecting-legacy-context-api) -Additional functionality will be added with future releases of React. +Funcionalidades adicionais serão adicionadas em versões futuras do React. -### Identifying unsafe lifecycles {#identifying-unsafe-lifecycles} +### Identificar métodos de ciclo de vida inseguros {#identifying-unsafe-lifecycles} -As explained [in this blog post](/blog/2018/03/27/update-on-async-rendering.html), certain legacy lifecycle methods are unsafe for use in async React applications. However, if your application uses third party libraries, it can be difficult to ensure that these lifecycles aren't being used. Fortunately, strict mode can help with this! +Como explicado [neste post](/blog/2018/03/27/update-on-async-rendering.html), alguns antigos métodos de ciclo de vida são inseguros de serem usados em aplicações assíncronas do React. Contudo, se a sua aplicação usa bibliotecas customizadas, pode ser difícil de verificar que esses métodos de ciclo de vida não estão sendo usados. Felizmente, o modo estrito pode ajudar nisso! -When strict mode is enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components, like so: +Quando o modo estrito está ativado, o React compila uma lista de todos os componentes classe usando ciclo de vida inseguros e loga uma mensagem de aviso com informações relativas a estes componentes, como: ![](../images/blog/strict-mode-unsafe-lifecycles-warning.png) -Addressing the issues identified by strict mode _now_ will make it easier for you to take advantage of async rendering in future releases of React. +Resolver os problemas identificados pelo modo estrito facilitará a utilização da renderização assíncrona em versões futuras do React. -### Warning about legacy string ref API usage {#warning-about-legacy-string-ref-api-usage} +### Avisos em relação ao uso da antiga string ref API {#warning-about-legacy-string-ref-api-usage} -Previously, React provided two ways for managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373) and so our official recommendation was to [use the callback form instead](/docs/refs-and-the-dom.html#legacy-api-string-refs). +Anteriormente, o React fornecia duas maneiras de gerenciar refs: a antiga string ref API e a callback API. Embora a string ref API fosse a mais conveniente das duas, ela apresentava [várias desvantagens](https://github.com/facebook/react/issues/1373) e, portanto, nossa recomendação oficial era [usar o formulário de callback](/docs/refs-and-the-dom.html#legacy-api-string-refs). -React 16.3 added a third option that offers the convenience of a string ref without any of the downsides: +O React 16.3 adicionou uma terceira opção que oferece a conveniência da string ref sem qualquer lado negativo: `embed:16-3-release-blog-post/create-ref-example.js` -Since object refs were largely added as a replacement for string refs, strict mode now warns about usage of string refs. +Como refs de objetos foram largamente usadas como substituto para as string refs, o modo estrito agora avisa em relação ao uso da antiga string ref API. -> **Note:** +> **Nota:** > -> Callback refs will continue to be supported in addition to the new `createRef` API. +> Callback refs continuarão a ser suportadas jutamente com a nova `createRef` API (introduzida no React 16.3). > -> You don't need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature. +> Você não precisa substituir callback refs em seus componentes. Elas são um pouco mais flexíveis, então continuam a ser um recurso avançado. -[Learn more about the new `createRef` API here.](/docs/refs-and-the-dom.html) +[Saiba mais sobre a nova `createRef` API aqui.](/docs/refs-and-the-dom.html) -### Warning about deprecated findDOMNode usage {#warning-about-deprecated-finddomnode-usage} +### Avisos em relação ao uso do depreciado findDOMNode {#warning-about-deprecated-finddomnode-usage} -React used to support `findDOMNode` to search the tree for a DOM node given a class instance. Normally you don't need this because you can [attach a ref directly to a DOM node](/docs/refs-and-the-dom.html#creating-refs). +O React costumava suportar `findDOMNode` para producar na árvore por um elemento DOM dada uma instância de classe. Normalmente, você não precisa disso, já que você pode [anexar uma ref diretamente para um elemento DOM](/docs/refs-and-the-dom.html#creating-refs). -`findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes. +`findDOMNode` também pode ser usado em componentes de classe, mas isso estava quebrando níveis de abstração ao permitir que um componente pai demandasse que certos componentes filhos fossem renderizados. Ele cria um risco de refatoração em que você não pode alterar os detalhes de implementação de um componente por que um componente pai pode estar alcançando o seu elemento DOM. `findDOMNode` somente retorna o primeiro filho, mas com o uso de fragmentos, é possível que um componente renderize múltiplos elementos DOM. `findDOMNode` é uma API de única leutura. Só envia resposta quando é chamado. Se um componente filho renderiza um elemento diferente, não há como lidar com essa mudança. Portando, `findDOMNode` só funciona se os componentes sempre retornassem um único elemento DOM que nunca muda. -You can instead make this explicit by pass a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). +Você pode deixar isso explícito se passar uma ref para o seu componente customizado, passando-o através do DOM usando [`encaminhamento de ref`](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). -You can also add a wrapper DOM node in your component and attach a ref directly to it. +Você também pode adicionar um elemento DOM que envolve o seu componente e anexar uma ref diretamente a ele. ```javascript{4,7} class MyComponent extends React.Component { @@ -73,19 +73,19 @@ class MyComponent extends React.Component { } ``` -> Note: +> Nota: > -> In CSS, the [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents) attribute can be used if you don't want the node to be part of the layout. +> Em CSS, o atributo [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents) pode ser usado se você não quer que o elemento faça parte do _layout_. -### Detecting unexpected side effects {#detecting-unexpected-side-effects} +### Detectar efeitos colaterais (side effects) inesperados {#detecting-unexpected-side-effects} -Conceptually, React does work in two phases: -* The **render** phase determines what changes need to be made to e.g. the DOM. During this phase, React calls `render` and then compares the result to the previous render. -* The **commit** phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like `componentDidMount` and `componentDidUpdate` during this phase. +Conceptualmente, o React funciona em duas fases: +* A **fase de renderização** determina quais mudanças precisam ser feitas para, por exemplo, o DOM. Durante essa fase, o React chama `render` e compara o resultado com a renderização anterior. +* A **fase de _commit_** é quando o React aplica qualquer mudança. (No caso do React DOM, isso é quando o React insere, atualiza ou remove nós do DOM.) O React também chama métodos de ciclo de vida como `componentDidMount` e `componentDidUpdate` durante essa fase. -The commit phase is usually very fast, but rendering can be slow. For this reason, the upcoming async mode (which is not enabled by default yet) breaks the rendering work into pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption). +A fase de _commit_ é geralmente muito rápida, mas a renderização pode ser devagar. Por essa razão, o futuro `modo assíncrono` (que ainda não é habilitado por padrão) quebra a renderização em pedaços, pauzando e resumindo o trabalho para evitar bloquear o navegador. Isso significa que o React pode invocar ciclos de vida da fase de renderização mais de uma vez antes de _commitar_, ou pode ainda invocá-los sem nem _commitar_ (dado um eventual erro ou uma interrupção de maior prioridade). -Render phase lifecycles include the following class component methods: +Os ciclos de vida da fase da renderização incluem os seguintes métodos do componente classe: * `constructor` * `componentWillMount` * `componentWillReceiveProps` @@ -93,32 +93,32 @@ Render phase lifecycles include the following class component methods: * `getDerivedStateFromProps` * `shouldComponentUpdate` * `render` -* `setState` updater functions (the first argument) +* `setState` funções atualizadoras (o primeiro argumento) -Because the above methods might be called more than once, it's important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they can often be [non-deterministic](https://en.wikipedia.org/wiki/Deterministic_algorithm). +Já que os métodos acima podem ser chamados mais de uma vez, é importante que eles não contenham efeitos colaterais. Ignorar essa regra pode levar a uma variedade de problemas, incluindo vazamento de memória e estado inválido da aplicação. Infelizmente, pode ser difícil detectar esses problemas, já que eles podem ser [não determinístico](https://en.wikipedia.org/wiki/Deterministic_algorithm). -Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods: +O modo estrito não pode detectar automaticamente efeitos colaterais para você, mas pode ajudá-lo a achá-los ao torná-los um pouco mais determinísticos. Isso é feito ao invocar duas vezes seguidas os seguintes métoods: -* Class component `constructor` method -* The `render` method -* `setState` updater functions (the first argument) -* The static `getDerivedStateFromProps` lifecycle +* O `constructor` de componentes classe +* O método `render` +* Funções atualizadoras do `setState` (o primeiro argumento) +* O estático (`static`) ciclo de vida `getDerivedStateFromProps` -> Note: +> Nota: > -> This only applies to development mode. _Lifecycles will not be double-invoked in production mode._ +> Isso só se aplica em modo de desenvolvimento. _Ciclos de vida não serão invocados duas vezes em produção. -For example, consider the following code: +Por exemplo, considere o seguinte código: `embed:strict-mode/side-effects-in-constructor.js` -At first glance, this code might not seem problematic. But if `SharedApplicationState.recordEvent` is not [idempotent](https://en.wikipedia.org/wiki/Idempotence#Computer_science_meaning), then instantiating this component multiple times could lead to invalid application state. This sort of subtle bug might not manifest during development, or it might do so inconsistently and so be overlooked. +À primeira vista, este código pode não parecer problemático. Mas se `SharedApplicationState.recordEvent` não for [idempotente](https://en.wikipedia.org/wiki/Idempotence#Computer_science_meaning), então instanciar este componente múltiplas vezes pode levar a um estado da aplicação inválido. Este tipo de erro pequeno e sutil pode não se manifestar durante o desenvolvimento, ou pode fazê-lo de forma inconsistente e, portanto, ser ignorado. -By intentionally double-invoking methods like the component constructor, strict mode makes patterns like this easier to spot. +Ao intencionalmente invocar os métodos de ciclo de vida duas vezes, como o construtor do componente, o modo estrito pode tornar padrões como este mais fácil de localizar. -### Detecting legacy context API {#detecting-legacy-context-api} +### Detectar o uso da antiga API de contexto {#detecting-legacy-context-api} -The legacy context API is error-prone, and will be removed in a future major version. It still works for all 16.x releases but will show this warning message in strict mode: +A antiga API de contexto era propensa a erros, e será removida em uma futura versão principal (_major version_). Ela ainda funciona para todas versões `16.x`, mas mostrará uma mensagem de aviso no modo estrito: ![](../images/blog/warn-legacy-context-in-strict-mode.png) -Read the [new context API documentation](/docs/context.html) to help migrate to the new version. +Leia a [documentação da nova API de contexto](/docs/context.html) para ajudá-lo a migrar para a nova versão. From baf258ddcfddaa72f49da083dd13fa52b2d60e8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Felipe=20Gon=C3=A7alves?= <23662020+lffg@users.noreply.github.com> Date: Sat, 9 Feb 2019 14:01:28 -0200 Subject: [PATCH 02/18] Fixes. --- content/docs/strict-mode.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 790a5eb05..6e7af1e06 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -1,10 +1,10 @@ --- id: strict-mode -title: Modo Estrito +title: Modo Estrito (Strict Mode) permalink: docs/strict-mode.html --- -O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais problemas em uma aplicação. Assim como o `Fragment`, o `StrictMode` não renderiza nenhum elemento visível na interface. Ele ativa, no entanto, verificações e avisos adicionais para os seus componentes filhos. +O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais problemas em uma aplicação. Assim como o `Fragment`, o `StrictMode` não renderiza nenhum elemento visível na interface. Ele ativa, no entanto, verificações e avisos adicionais para os componentes que descendem dele. > Nota: > @@ -13,20 +13,20 @@ O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais probl Você pode habilitar o modo estrito para qualquer parte da sua aplicação, por exemplo: `embed:strict-mode/enabling-strict-mode.js` -No exemplo acima, as verificações do modo estrito não serão executadas nos componentes `Header` e `Footer`. No entanto, `ComponentOne` e `ComponentTwo`, assim como todos os seus componentes filhos, serão verificados. +No exemplo acima, as verificações do modo estrito não serão executadas nos componentes `Header` e `Footer`. No entanto, `ComponentOne` e `ComponentTwo`, assim como todos os seus componentes descendentes, serão verificados. O modo estrito ajuda atualmente com: -* [Identificar componentes com métodos de ciclo de vida inseguros](#identifying-unsafe-lifecycles) +* [Identificar métodos de ciclo de vida (lifecycles) inseguros](#identifying-unsafe-lifecycles) * [Avisos em relação ao uso da antiga string ref API](#warning-about-legacy-string-ref-api-usage) * [Avisos em relação ao uso do depreciado findDOMNode](#warning-about-deprecated-finddomnode-usage) * [Detectar efeitos colaterais (side effects) inesperados](#detecting-unexpected-side-effects) -* [Detectar o uso da antiga API de contexto](#detecting-legacy-context-api) +* [Detectar o uso da antiga API de contexto (Context API)](#detecting-legacy-context-api) Funcionalidades adicionais serão adicionadas em versões futuras do React. -### Identificar métodos de ciclo de vida inseguros {#identifying-unsafe-lifecycles} +### Identificar métodos de ciclo de vida (lifecycles) inseguros {#identifying-unsafe-lifecycles} -Como explicado [neste post](/blog/2018/03/27/update-on-async-rendering.html), alguns antigos métodos de ciclo de vida são inseguros de serem usados em aplicações assíncronas do React. Contudo, se a sua aplicação usa bibliotecas customizadas, pode ser difícil de verificar que esses métodos de ciclo de vida não estão sendo usados. Felizmente, o modo estrito pode ajudar nisso! +Como explicado [neste post](/blog/2018/03/27/update-on-async-rendering.html), alguns antigos métodos de ciclo de vida (lifecycles) são inseguros de serem usados em aplicações assíncronas do React. Contudo, se a sua aplicação usa bibliotecas customizadas, pode ser difícil de verificar que esses métodos de ciclo de vida não estão sendo usados. Felizmente, o modo estrito pode ajudar nisso! Quando o modo estrito está ativado, o React compila uma lista de todos os componentes classe usando ciclo de vida inseguros e loga uma mensagem de aviso com informações relativas a estes componentes, como: @@ -45,7 +45,7 @@ Como refs de objetos foram largamente usadas como substituto para as string refs > **Nota:** > -> Callback refs continuarão a ser suportadas jutamente com a nova `createRef` API (introduzida no React 16.3). +> Callback refs continuarão a ter suporte jutamente com a nova `createRef` API (introduzida no React 16.3). > > Você não precisa substituir callback refs em seus componentes. Elas são um pouco mais flexíveis, então continuam a ser um recurso avançado. @@ -106,7 +106,7 @@ O modo estrito não pode detectar automaticamente efeitos colaterais para você, > Nota: > -> Isso só se aplica em modo de desenvolvimento. _Ciclos de vida não serão invocados duas vezes em produção. +> Isso só se aplica em modo de desenvolvimento. _Ciclos de vida não serão invocados duas vezes em produção._ Por exemplo, considere o seguinte código: `embed:strict-mode/side-effects-in-constructor.js` @@ -115,7 +115,7 @@ Por exemplo, considere o seguinte código: Ao intencionalmente invocar os métodos de ciclo de vida duas vezes, como o construtor do componente, o modo estrito pode tornar padrões como este mais fácil de localizar. -### Detectar o uso da antiga API de contexto {#detecting-legacy-context-api} +### Detectar o uso da antiga API de contexto (Context API) {#detecting-legacy-context-api} A antiga API de contexto era propensa a erros, e será removida em uma futura versão principal (_major version_). Ela ainda funciona para todas versões `16.x`, mas mostrará uma mensagem de aviso no modo estrito: From 5f63f8910e823e6b0d4c2284140a03fc2beeeee6 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:45:41 -0200 Subject: [PATCH 03/18] "usando ciclo" -> "que usam ciclos" Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 6e7af1e06..67cdf4c8b 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -28,7 +28,7 @@ Funcionalidades adicionais serão adicionadas em versões futuras do React. Como explicado [neste post](/blog/2018/03/27/update-on-async-rendering.html), alguns antigos métodos de ciclo de vida (lifecycles) são inseguros de serem usados em aplicações assíncronas do React. Contudo, se a sua aplicação usa bibliotecas customizadas, pode ser difícil de verificar que esses métodos de ciclo de vida não estão sendo usados. Felizmente, o modo estrito pode ajudar nisso! -Quando o modo estrito está ativado, o React compila uma lista de todos os componentes classe usando ciclo de vida inseguros e loga uma mensagem de aviso com informações relativas a estes componentes, como: +Quando o modo estrito está ativado, o React compila uma lista de todos os componentes classe que usam ciclos de vida inseguros e imprime no console uma mensagem de aviso com informações relativas a estes componentes, como: ![](../images/blog/strict-mode-unsafe-lifecycles-warning.png) From 928ba50c22535d33a570fe14bf9496dda9c0db04 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:46:27 -0200 Subject: [PATCH 04/18] "Avisos" -> "Aviso" Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 67cdf4c8b..06a67b5a3 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -34,7 +34,7 @@ Quando o modo estrito está ativado, o React compila uma lista de todos os compo Resolver os problemas identificados pelo modo estrito facilitará a utilização da renderização assíncrona em versões futuras do React. -### Avisos em relação ao uso da antiga string ref API {#warning-about-legacy-string-ref-api-usage} +### Aviso em relação ao uso da antiga string ref API {#warning-about-legacy-string-ref-api-usage} Anteriormente, o React fornecia duas maneiras de gerenciar refs: a antiga string ref API e a callback API. Embora a string ref API fosse a mais conveniente das duas, ela apresentava [várias desvantagens](https://github.com/facebook/react/issues/1373) e, portanto, nossa recomendação oficial era [usar o formulário de callback](/docs/refs-and-the-dom.html#legacy-api-string-refs). From 8d14be2d226b4891b6b47c723cea52398cca77a0 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:46:46 -0200 Subject: [PATCH 05/18] "lado negativo" -? Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 06a67b5a3..2e8b392e9 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -38,7 +38,7 @@ Resolver os problemas identificados pelo modo estrito facilitará a utilização Anteriormente, o React fornecia duas maneiras de gerenciar refs: a antiga string ref API e a callback API. Embora a string ref API fosse a mais conveniente das duas, ela apresentava [várias desvantagens](https://github.com/facebook/react/issues/1373) e, portanto, nossa recomendação oficial era [usar o formulário de callback](/docs/refs-and-the-dom.html#legacy-api-string-refs). -O React 16.3 adicionou uma terceira opção que oferece a conveniência da string ref sem qualquer lado negativo: +O React 16.3 adicionou uma terceira opção que oferece a conveniência da string ref sem qualquer desvantagem: `embed:16-3-release-blog-post/create-ref-example.js` Como refs de objetos foram largamente usadas como substituto para as string refs, o modo estrito agora avisa em relação ao uso da antiga string ref API. From 3fac65b5699266e4236536fd229a2ba47623ebe2 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:48:25 -0200 Subject: [PATCH 06/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311412 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 2e8b392e9..8a42d525e 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -41,7 +41,7 @@ Anteriormente, o React fornecia duas maneiras de gerenciar refs: a antiga string O React 16.3 adicionou uma terceira opção que oferece a conveniência da string ref sem qualquer desvantagem: `embed:16-3-release-blog-post/create-ref-example.js` -Como refs de objetos foram largamente usadas como substituto para as string refs, o modo estrito agora avisa em relação ao uso da antiga string ref API. +Como refs de objetos foram adicionadas como substitutos para as string refs, o modo estrito agora avisa em relação ao uso da antiga string ref API. > **Nota:** > From 0305b3c85c03f99aeb3b201cb9c44d0b3e4db2c9 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:48:57 -0200 Subject: [PATCH 07/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311521 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 8a42d525e..a89067843 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -4,7 +4,7 @@ title: Modo Estrito (Strict Mode) permalink: docs/strict-mode.html --- -O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais problemas em uma aplicação. Assim como o `Fragment`, o `StrictMode` não renderiza nenhum elemento visível na interface. Ele ativa, no entanto, verificações e avisos adicionais para os componentes que descendem dele. +O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais problemas em uma aplicação. Assim como o `Fragment`, o `StrictMode` não renderiza nenhum elemento visível na interface. Ele ativa, no entanto, verificações e avisos adicionais para os seus descendentes. > Nota: > From 5af8be3e836bf8dae5ea7ae30d7b70b157b3e0c6 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:49:22 -0200 Subject: [PATCH 08/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311552 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index a89067843..9fc590315 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -13,7 +13,7 @@ O modo estrito (`Strict Mode`) é uma ferramenta para sinalizar potenciais probl Você pode habilitar o modo estrito para qualquer parte da sua aplicação, por exemplo: `embed:strict-mode/enabling-strict-mode.js` -No exemplo acima, as verificações do modo estrito não serão executadas nos componentes `Header` e `Footer`. No entanto, `ComponentOne` e `ComponentTwo`, assim como todos os seus componentes descendentes, serão verificados. +No exemplo acima, as verificações do modo estrito *não* serão executadas nos componentes `Header` e `Footer`. No entanto, `ComponentOne` e `ComponentTwo`, assim como todos os seus componentes descendentes, serão verificados. O modo estrito ajuda atualmente com: * [Identificar métodos de ciclo de vida (lifecycles) inseguros](#identifying-unsafe-lifecycles) From 8eb795a32ce8420c5efcbab8f7681e28c6956cbb Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:49:56 -0200 Subject: [PATCH 09/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311702 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 9fc590315..2e9ff00ce 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -16,7 +16,7 @@ Você pode habilitar o modo estrito para qualquer parte da sua aplicação, por No exemplo acima, as verificações do modo estrito *não* serão executadas nos componentes `Header` e `Footer`. No entanto, `ComponentOne` e `ComponentTwo`, assim como todos os seus componentes descendentes, serão verificados. O modo estrito ajuda atualmente com: -* [Identificar métodos de ciclo de vida (lifecycles) inseguros](#identifying-unsafe-lifecycles) +* [Identificação de métodos de ciclo de vida (lifecycles) inseguros](#identifying-unsafe-lifecycles) * [Avisos em relação ao uso da antiga string ref API](#warning-about-legacy-string-ref-api-usage) * [Avisos em relação ao uso do depreciado findDOMNode](#warning-about-deprecated-finddomnode-usage) * [Detectar efeitos colaterais (side effects) inesperados](#detecting-unexpected-side-effects) From 7c155a9557ab80263069bd5cfaca5dc67c8cc29c Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:55:26 -0200 Subject: [PATCH 10/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255313209 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 2e9ff00ce..00f44f4fd 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -95,7 +95,7 @@ Os ciclos de vida da fase da renderização incluem os seguintes métodos do com * `render` * `setState` funções atualizadoras (o primeiro argumento) -Já que os métodos acima podem ser chamados mais de uma vez, é importante que eles não contenham efeitos colaterais. Ignorar essa regra pode levar a uma variedade de problemas, incluindo vazamento de memória e estado inválido da aplicação. Infelizmente, pode ser difícil detectar esses problemas, já que eles podem ser [não determinístico](https://en.wikipedia.org/wiki/Deterministic_algorithm). +Já que os métodos acima podem ser chamados mais de uma vez, é importante que eles não contenham efeitos colaterais. Ignorar essa regra pode levar a uma variedade de problemas, incluindo vazamento de memória e estado inválido da aplicação. Infelizmente, pode ser difícil detectar esses problemas, já que eles podem ser [não determinísticos](https://en.wikipedia.org/wiki/Deterministic_algorithm). O modo estrito não pode detectar automaticamente efeitos colaterais para você, mas pode ajudá-lo a achá-los ao torná-los um pouco mais determinísticos. Isso é feito ao invocar duas vezes seguidas os seguintes métoods: From 79a93f72f5718dba821a1d4825f151e834927303 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:57:22 -0200 Subject: [PATCH 11/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255312979 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 00f44f4fd..b32605a70 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -55,7 +55,7 @@ Como refs de objetos foram adicionadas como substitutos para as string refs, o m O React costumava suportar `findDOMNode` para producar na árvore por um elemento DOM dada uma instância de classe. Normalmente, você não precisa disso, já que você pode [anexar uma ref diretamente para um elemento DOM](/docs/refs-and-the-dom.html#creating-refs). -`findDOMNode` também pode ser usado em componentes de classe, mas isso estava quebrando níveis de abstração ao permitir que um componente pai demandasse que certos componentes filhos fossem renderizados. Ele cria um risco de refatoração em que você não pode alterar os detalhes de implementação de um componente por que um componente pai pode estar alcançando o seu elemento DOM. `findDOMNode` somente retorna o primeiro filho, mas com o uso de fragmentos, é possível que um componente renderize múltiplos elementos DOM. `findDOMNode` é uma API de única leutura. Só envia resposta quando é chamado. Se um componente filho renderiza um elemento diferente, não há como lidar com essa mudança. Portando, `findDOMNode` só funciona se os componentes sempre retornassem um único elemento DOM que nunca muda. +`findDOMNode` também pode ser usado em componentes de classe, mas isso estava quebrando níveis de abstração ao permitir que um componente pai demandasse que certos componentes filhos fossem renderizados. Ele cria um risco de refatoração em que você não pode alterar os detalhes de implementação de um componente por que um componente pai pode estar alcançando o seu elemento DOM. `findDOMNode` somente retorna o primeiro filho, mas com o uso de fragmentos, é possível que um componente renderize múltiplos elementos DOM. `findDOMNode` é uma API de única leitura. Só enviava resposta quando você chamava. Se um componente filho renderiza um elemento diferente, não há como lidar com essa mudança. Portando, `findDOMNode` só funcionava se os componentes sempre retornassem um único elemento DOM que nunca muda. Você pode deixar isso explícito se passar uma ref para o seu componente customizado, passando-o através do DOM usando [`encaminhamento de ref`](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). From cb24338e08977d49d11d9128529e8913238b1d40 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:58:07 -0200 Subject: [PATCH 12/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311767 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index b32605a70..aebb06ef6 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -19,7 +19,7 @@ O modo estrito ajuda atualmente com: * [Identificação de métodos de ciclo de vida (lifecycles) inseguros](#identifying-unsafe-lifecycles) * [Avisos em relação ao uso da antiga string ref API](#warning-about-legacy-string-ref-api-usage) * [Avisos em relação ao uso do depreciado findDOMNode](#warning-about-deprecated-finddomnode-usage) -* [Detectar efeitos colaterais (side effects) inesperados](#detecting-unexpected-side-effects) +* [Detecção de efeitos colaterais (side effects) inesperados](#detecting-unexpected-side-effects) * [Detectar o uso da antiga API de contexto (Context API)](#detecting-legacy-context-api) Funcionalidades adicionais serão adicionadas em versões futuras do React. From dc7bf1c89825aa255a93db34c289d1fa569b2496 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:58:21 -0200 Subject: [PATCH 13/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311785 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index aebb06ef6..cc81f7fb4 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -20,7 +20,7 @@ O modo estrito ajuda atualmente com: * [Avisos em relação ao uso da antiga string ref API](#warning-about-legacy-string-ref-api-usage) * [Avisos em relação ao uso do depreciado findDOMNode](#warning-about-deprecated-finddomnode-usage) * [Detecção de efeitos colaterais (side effects) inesperados](#detecting-unexpected-side-effects) -* [Detectar o uso da antiga API de contexto (Context API)](#detecting-legacy-context-api) +* [Detecção de uso da antiga API de contexto (Context API)](#detecting-legacy-context-api) Funcionalidades adicionais serão adicionadas em versões futuras do React. From 12828e871659434fb7dcdb6ccc1b4b2f50cf1122 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:58:40 -0200 Subject: [PATCH 14/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255311989 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index cc81f7fb4..d7c8f2f9e 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -32,7 +32,7 @@ Quando o modo estrito está ativado, o React compila uma lista de todos os compo ![](../images/blog/strict-mode-unsafe-lifecycles-warning.png) -Resolver os problemas identificados pelo modo estrito facilitará a utilização da renderização assíncrona em versões futuras do React. +Resolver os problemas identificados pelo modo estrito _agora_, facilitará a utilização da renderização assíncrona em versões futuras do React. ### Aviso em relação ao uso da antiga string ref API {#warning-about-legacy-string-ref-api-usage} From e0d5b8b8711bf6de7ee4ab0b0f191d4c84e1909e Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:59:13 -0200 Subject: [PATCH 15/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255312150 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index d7c8f2f9e..933208e4c 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -45,7 +45,7 @@ Como refs de objetos foram adicionadas como substitutos para as string refs, o m > **Nota:** > -> Callback refs continuarão a ter suporte jutamente com a nova `createRef` API (introduzida no React 16.3). +> Callback refs continuarão a ter suporte juntamente com a nova `createRef` API (introduzida no React 16.3). > > Você não precisa substituir callback refs em seus componentes. Elas são um pouco mais flexíveis, então continuam a ser um recurso avançado. From 9c8ae685f753a810a9dab58c3350a5202c86e1dc Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 19:59:50 -0200 Subject: [PATCH 16/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255312181 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 933208e4c..9fbd1f5e6 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -51,7 +51,7 @@ Como refs de objetos foram adicionadas como substitutos para as string refs, o m [Saiba mais sobre a nova `createRef` API aqui.](/docs/refs-and-the-dom.html) -### Avisos em relação ao uso do depreciado findDOMNode {#warning-about-deprecated-finddomnode-usage} +### Aviso em relação ao uso do depreciado findDOMNode {#warning-about-deprecated-finddomnode-usage} O React costumava suportar `findDOMNode` para producar na árvore por um elemento DOM dada uma instância de classe. Normalmente, você não precisa disso, já que você pode [anexar uma ref diretamente para um elemento DOM](/docs/refs-and-the-dom.html#creating-refs). From dd95b82fe855c67e059c5450fc3e409804591e05 Mon Sep 17 00:00:00 2001 From: Francisco Joshua Date: Sat, 9 Feb 2019 20:00:10 -0200 Subject: [PATCH 17/18] https://github.com/reactjs/pt-BR.reactjs.org/pull/25#discussion_r255312228 Co-Authored-By: lffg <23662020+lffg@users.noreply.github.com> --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 9fbd1f5e6..6ce911246 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -53,7 +53,7 @@ Como refs de objetos foram adicionadas como substitutos para as string refs, o m ### Aviso em relação ao uso do depreciado findDOMNode {#warning-about-deprecated-finddomnode-usage} -O React costumava suportar `findDOMNode` para producar na árvore por um elemento DOM dada uma instância de classe. Normalmente, você não precisa disso, já que você pode [anexar uma ref diretamente para um elemento DOM](/docs/refs-and-the-dom.html#creating-refs). +O React costumava suportar `findDOMNode` para procurar na árvore por um elemento DOM dada uma instância de classe. Normalmente, você não precisa disso, já que você pode [anexar uma ref diretamente em um elemento DOM](/docs/refs-and-the-dom.html#creating-refs). `findDOMNode` também pode ser usado em componentes de classe, mas isso estava quebrando níveis de abstração ao permitir que um componente pai demandasse que certos componentes filhos fossem renderizados. Ele cria um risco de refatoração em que você não pode alterar os detalhes de implementação de um componente por que um componente pai pode estar alcançando o seu elemento DOM. `findDOMNode` somente retorna o primeiro filho, mas com o uso de fragmentos, é possível que um componente renderize múltiplos elementos DOM. `findDOMNode` é uma API de única leitura. Só enviava resposta quando você chamava. Se um componente filho renderiza um elemento diferente, não há como lidar com essa mudança. Portando, `findDOMNode` só funcionava se os componentes sempre retornassem um único elemento DOM que nunca muda. From 01ddff67e0241bd1b5c222d03e6c81e14280f873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Felipe=20Gon=C3=A7alves?= <23662020+lffg@users.noreply.github.com> Date: Sat, 9 Feb 2019 20:01:57 -0200 Subject: [PATCH 18/18] =?UTF-8?q?Corrigir=20"m=C3=A9toods"=20(https://gith?= =?UTF-8?q?ub.com/reactjs/pt-BR.reactjs.org/pull/25#discussion=5Fr25531324?= =?UTF-8?q?0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/strict-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 6ce911246..b5e7df49e 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -97,7 +97,7 @@ Os ciclos de vida da fase da renderização incluem os seguintes métodos do com Já que os métodos acima podem ser chamados mais de uma vez, é importante que eles não contenham efeitos colaterais. Ignorar essa regra pode levar a uma variedade de problemas, incluindo vazamento de memória e estado inválido da aplicação. Infelizmente, pode ser difícil detectar esses problemas, já que eles podem ser [não determinísticos](https://en.wikipedia.org/wiki/Deterministic_algorithm). -O modo estrito não pode detectar automaticamente efeitos colaterais para você, mas pode ajudá-lo a achá-los ao torná-los um pouco mais determinísticos. Isso é feito ao invocar duas vezes seguidas os seguintes métoods: +O modo estrito não pode detectar automaticamente efeitos colaterais para você, mas pode ajudá-lo a achá-los ao torná-los um pouco mais determinísticos. Isso é feito ao invocar duas vezes seguidas os seguintes métodos: * O `constructor` de componentes classe * O método `render`