From 5437b1b166ec6beaf51908cf065a22929b50e974 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Victor=20Magalh=C3=A3es?= Date: Mon, 25 Feb 2019 09:08:41 -0300 Subject: [PATCH 1/6] Traduzir "Estado de componente" no FAQ --- content/docs/faq-state.md | 83 ++++++++++++++++++++------------------- content/docs/nav.yml | 2 +- 2 files changed, 43 insertions(+), 42 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index c2b7b6657..f1a3903ed 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,106 +1,107 @@ --- id: faq-state -title: Component State +title: Estado de componente permalink: docs/faq-state.html layout: docs category: FAQ --- -### What does `setState` do? {#what-does-setstate-do} +### O que `setState` faz? {#what-does-setstate-do} -`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. +`setState()` agenda uma atualização para o objeto `state` de um componente. Quando o estado muda, o componente responde renderizando novamente. -### What is the difference between `state` and `props`? {#what-is-the-difference-between-state-and-props} +### Qual é a diferença entre `state` e `props`? {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function). +[`props`](/docs/components-and-props.html) (abreviação de "properties") e [`state`](/docs/state-and-lifecycle.html) são ambos objetos Javascript. Apesar de ambos guardarem informações que influenciam no resultado da renderização, eles são diferentes por uma razão importante: `props` são *passados* para o componente (como parâmetros de funções), enquanto `state` é gerenciado *de dentro* do componente (como variáveis declaradas dentro de uma função). + +Aqui estão alguns bons recursos para ler mais sobre quando usar `props` vs `state` (ambos em inglês): -Here are some good resources for further reading on when to use `props` vs `state`: * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/) -### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value} +### Por que `setState` está me dando o valor errado? {#why-is-setstate-giving-me-the-wrong-value} -In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen. +Em React, tanto `this.props` quanto `this.state` representam os valores *renderizados*, ou seja, o que está atualmente na tela. -Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details). +Chamadas para `setState` são assíncronas - não confie que `this.state` vai refletir o novo valor imediatamente após chamar `setState`. Use uma função de atualização ao invés de um objeto se você precisa calcular valores baseado no estado atual (veja abaixo para mais detalhes). -Example of code that will *not* behave as expected: +Exemplo de código que *não* vai funcionar como esperado: ```jsx incrementCount() { - // Note: this will *not* work as intended. + // Nota: isso *não* vai funcionar como esperado. this.setState({count: this.state.count + 1}); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // Digamos que `this.state.count` começa em 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); - // When React re-renders the component, `this.state.count` will be 1, but you expected 3. + // Quando o React renderizar novamente o componente, `this.state.count` será 1, mas você esperava 3. - // This is because `incrementCount()` function above reads from `this.state.count`, - // but React doesn't update `this.state.count` until the component is re-rendered. - // So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1. + // Isso é porque a funçao `incrementCount()` usa `this.state.count`, + // mas o React não atualiza `this.state.count` até o componente ser renderizado novamente. + // Então `incrementCount()` acaba lendo `this.state.count` como 0 todas as vezes, e muda seu valor para 1. - // The fix is described below! + // A solução é exibida abaixo! } ``` -See below for how to fix this problem. +Veja abaixo como solucionar esse problema. -### How do I update state with values that depend on the current state? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} +### Como eu atualizo estado com valores que dependem do estado atual? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below). +Passe uma função ao invés de um objeto para `setState` para garantir que a chamada sempre usa o valor mais recente do estado (veja abaixo). -### What is the difference between passing an object or a function in `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} +### Qual é a diferença entre passar um objeto e uma função em `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting: +Passar uma função de atualização permite que você acesse o valor atual do estado dentro dela. Como as chamadas de `setState` são feitas em lotes, isso permite que você encadeie atualizações e garanta que elas se componham ao invés de entrar em conflito: ```jsx incrementCount() { this.setState((state) => { - // Important: read `state` instead of `this.state` when updating. + // Importante: use `state` ao invés de `this.state` quando estiver atualizando. return {count: state.count + 1} }); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // Digamos que `this.state.count` começa em 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); - // If you read `this.state.count` now, it would still be 0. - // But when React re-renders the component, it will be 3. + // Se você ler `this.state.count` agora, ele ainda seria 0. + // Mas quando o React renderiza novamente o componente, ele será 3. } ``` -[Learn more about setState](/docs/react-component.html#setstate) +[Saiba mais sobre setState](/docs/react-component.html#setstate) -### When is `setState` asynchronous? {#when-is-setstate-asynchronous} +### Quando `setState` é assíncrono? {#when-is-setstate-asynchronous} -Currently, `setState` is asynchronous inside event handlers. +Atualmente, `setState` é assíncrono dentro de gerenciadores de evento. -This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps. +Isso garante que, por exemplo, caso tanto `Parent` quanto `Child` chamem `setState` após um evento de clique, `Child` não seja renderizado duas vezes. Ao invés disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores. -This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases. +Isso é um detalhes de implementação, então evite dependender disso diretamente. Em versões futuras, o React fará atualizações em lotes em mais casos. -### Why doesn't React update `this.state` synchronously? {#why-doesnt-react-update-thisstate-synchronously} +### Por que o React não atualiza `this.state` síncronamente? {#why-doesnt-react-update-thisstate-synchronously} -As explained in the previous section, React intentionally "waits" until all components call `setState()` in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders. +Como explicado na seção anterior, React intencionalmente "espera" até todos os componentes terem chamado `setState()` em seus gerenciadores de evento antes de começar a renderizar novamente. Isso aumenta performance por evitar renderizações desnecessárias. -However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering. +No entanto, você pode ainda estar se perguntando porque React não atualiza apenas `this.state` imediatamente, sem renderizar novamente. -There are two main reasons: +Por duas razões principais: -* This would break the consistency between `props` and `state`, causing issues that are very hard to debug. -* This would make some of the new features we're working on impossible to implement. +* Isso quebraria a consistência entre `props` e `state`, causando problemas muito difíceis de debugar. +* Isso tornaria algumas das novas funcionalidades em que estamos trabalhando impossíveis de implementar. -This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples. +Esse [comentário no GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) se aprofunda em exemplos. -### Should I use a state management library like Redux or MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx} +### Eu devo usar uma biblioteca de gerenciamento de estado, como Redux ou MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx} -[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux) +[Talvez.](https://redux.js.org/faq/general#when-should-i-use-redux) -It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React. +É uma boa ideia se aprofundar em React primeiro, antes de adicionar bibliotecas. Você pode fazer aplicativos bastante complexos apenas com React. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 2b4f459bf..cc6719c2f 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -142,7 +142,7 @@ - id: faq-functions title: Passing Functions to Components - id: faq-state - title: Component State + title: Estado de componente - id: faq-styling title: Estilização e CSS - id: faq-structure From bf958551db4518f263003bd015b0233b2a4c7db9 Mon Sep 17 00:00:00 2001 From: Luan Ferreira Date: Mon, 25 Feb 2019 13:08:08 -0300 Subject: [PATCH 2/6] Apply fixes from code review Co-Authored-By: vhfmag --- content/docs/faq-state.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index f1a3903ed..fc27224aa 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -52,7 +52,7 @@ Veja abaixo como solucionar esse problema. ### Como eu atualizo estado com valores que dependem do estado atual? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -Passe uma função ao invés de um objeto para `setState` para garantir que a chamada sempre usa o valor mais recente do estado (veja abaixo). +Passe uma função ao invés de um objeto para `setState` para garantir que a chamada sempre use o valor mais recente do estado (veja abaixo). ### Qual é a diferença entre passar um objeto e uma função em `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} @@ -85,7 +85,7 @@ Atualmente, `setState` é assíncrono dentro de gerenciadores de evento. Isso garante que, por exemplo, caso tanto `Parent` quanto `Child` chamem `setState` após um evento de clique, `Child` não seja renderizado duas vezes. Ao invés disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores. -Isso é um detalhes de implementação, então evite dependender disso diretamente. Em versões futuras, o React fará atualizações em lotes em mais casos. +Isso é um detalhe de implementação, então evite depender disso diretamente. Em versões futuras, o React fará atualizações em lotes em mais casos. ### Por que o React não atualiza `this.state` síncronamente? {#why-doesnt-react-update-thisstate-synchronously} @@ -93,7 +93,7 @@ Como explicado na seção anterior, React intencionalmente "espera" até todos o No entanto, você pode ainda estar se perguntando porque React não atualiza apenas `this.state` imediatamente, sem renderizar novamente. -Por duas razões principais: +Existem duas principais razões: * Isso quebraria a consistência entre `props` e `state`, causando problemas muito difíceis de debugar. * Isso tornaria algumas das novas funcionalidades em que estamos trabalhando impossíveis de implementar. From d04cc3c41ec518df952a0e7e4ace40223898f764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Victor=20Magalh=C3=A3es?= Date: Mon, 25 Feb 2019 13:09:13 -0300 Subject: [PATCH 3/6] Add missing article, try new sentence structure --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index fc27224aa..667cef837 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -91,7 +91,7 @@ Isso é um detalhe de implementação, então evite depender disso diretamente. Como explicado na seção anterior, React intencionalmente "espera" até todos os componentes terem chamado `setState()` em seus gerenciadores de evento antes de começar a renderizar novamente. Isso aumenta performance por evitar renderizações desnecessárias. -No entanto, você pode ainda estar se perguntando porque React não atualiza apenas `this.state` imediatamente, sem renderizar novamente. +No entanto, você pode ainda estar se perguntando porque o React simplesmene não atualiza `this.state` imediatamente, sem renderizar novamente. Existem duas principais razões: From 0a8bd8ae9c272042be0491416dc4e758d57bae08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Victor=20Magalh=C3=A3es?= Date: Mon, 25 Feb 2019 18:23:58 -0300 Subject: [PATCH 4/6] Fix event handler translation to match convention --- content/docs/faq-state.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 667cef837..d2ec4ab50 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -81,7 +81,7 @@ handleSomething() { ### Quando `setState` é assíncrono? {#when-is-setstate-asynchronous} -Atualmente, `setState` é assíncrono dentro de gerenciadores de evento. +Atualmente, `setState` é assíncrono dentro de manipuladores de evento. Isso garante que, por exemplo, caso tanto `Parent` quanto `Child` chamem `setState` após um evento de clique, `Child` não seja renderizado duas vezes. Ao invés disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores. @@ -89,7 +89,7 @@ Isso é um detalhe de implementação, então evite depender disso diretamente. ### Por que o React não atualiza `this.state` síncronamente? {#why-doesnt-react-update-thisstate-synchronously} -Como explicado na seção anterior, React intencionalmente "espera" até todos os componentes terem chamado `setState()` em seus gerenciadores de evento antes de começar a renderizar novamente. Isso aumenta performance por evitar renderizações desnecessárias. +Como explicado na seção anterior, React intencionalmente "espera" até todos os componentes terem chamado `setState()` em seus manipuladores de evento antes de começar a renderizar novamente. Isso aumenta performance por evitar renderizações desnecessárias. No entanto, você pode ainda estar se perguntando porque o React simplesmene não atualiza `this.state` imediatamente, sem renderizar novamente. From c2fa1a43a5c0a22e136513386370b91aee8d9ba1 Mon Sep 17 00:00:00 2001 From: Halian Vilela Date: Tue, 26 Feb 2019 06:37:40 -0300 Subject: [PATCH 5/6] Apply suggestions from code review Co-Authored-By: vhfmag --- content/docs/faq-state.md | 24 ++++++++++++------------ content/docs/nav.yml | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index d2ec4ab50..2810dba6a 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,6 +1,6 @@ --- id: faq-state -title: Estado de componente +title: State do Componente permalink: docs/faq-state.html layout: docs category: FAQ @@ -8,7 +8,7 @@ category: FAQ ### O que `setState` faz? {#what-does-setstate-do} -`setState()` agenda uma atualização para o objeto `state` de um componente. Quando o estado muda, o componente responde renderizando novamente. +`setState()` agenda uma atualização para o objeto `state` de um componente. Quando o state muda, o componente responde renderizando novamente. ### Qual é a diferença entre `state` e `props`? {#what-is-the-difference-between-state-and-props} @@ -23,7 +23,7 @@ Aqui estão alguns bons recursos para ler mais sobre quando usar `props` vs `sta Em React, tanto `this.props` quanto `this.state` representam os valores *renderizados*, ou seja, o que está atualmente na tela. -Chamadas para `setState` são assíncronas - não confie que `this.state` vai refletir o novo valor imediatamente após chamar `setState`. Use uma função de atualização ao invés de um objeto se você precisa calcular valores baseado no estado atual (veja abaixo para mais detalhes). +Chamadas para `setState` são assíncronas - não confie que `this.state` vá refletir o novo valor imediatamente após chamar `setState`. Use uma função de atualização ao invés de um objeto se você precisa calcular valores baseado no state atual (veja abaixo para mais detalhes). Exemplo de código que *não* vai funcionar como esperado: @@ -40,7 +40,7 @@ handleSomething() { this.incrementCount(); // Quando o React renderizar novamente o componente, `this.state.count` será 1, mas você esperava 3. - // Isso é porque a funçao `incrementCount()` usa `this.state.count`, + // Isso é porque a função `incrementCount()` usa `this.state.count`, // mas o React não atualiza `this.state.count` até o componente ser renderizado novamente. // Então `incrementCount()` acaba lendo `this.state.count` como 0 todas as vezes, e muda seu valor para 1. @@ -50,18 +50,18 @@ handleSomething() { Veja abaixo como solucionar esse problema. -### Como eu atualizo estado com valores que dependem do estado atual? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} +### Como eu atualizo o state com valores que dependem do state atual? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -Passe uma função ao invés de um objeto para `setState` para garantir que a chamada sempre use o valor mais recente do estado (veja abaixo). +Passe uma função ao invés de um objeto para `setState` para garantir que a chamada sempre use o valor mais recente do state (veja abaixo). ### Qual é a diferença entre passar um objeto e uma função em `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -Passar uma função de atualização permite que você acesse o valor atual do estado dentro dela. Como as chamadas de `setState` são feitas em lotes, isso permite que você encadeie atualizações e garanta que elas se componham ao invés de entrar em conflito: +Passar uma função de atualização permite que você acesse o valor atual do state dentro dela. Como as chamadas de `setState` são feitas em lotes, isso permite que você encadeie atualizações e garanta que elas se componham ao invés de entrar em conflito: ```jsx incrementCount() { this.setState((state) => { - // Importante: use `state` ao invés de `this.state` quando estiver atualizando. + // Importante: use `state` em vez de `this.state` quando estiver atualizando. return {count: state.count + 1} }); } @@ -73,7 +73,7 @@ handleSomething() { this.incrementCount(); // Se você ler `this.state.count` agora, ele ainda seria 0. - // Mas quando o React renderiza novamente o componente, ele será 3. + // Mas quando o React renderizar novamente o componente, ele será 3. } ``` @@ -83,7 +83,7 @@ handleSomething() { Atualmente, `setState` é assíncrono dentro de manipuladores de evento. -Isso garante que, por exemplo, caso tanto `Parent` quanto `Child` chamem `setState` após um evento de clique, `Child` não seja renderizado duas vezes. Ao invés disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores. +Isso garante que, por exemplo, caso tanto `Parent` quanto `Child` chamem `setState` após um evento de clique, `Child` não seja renderizado duas vezes. Em vez disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores. Isso é um detalhe de implementação, então evite depender disso diretamente. Em versões futuras, o React fará atualizações em lotes em mais casos. @@ -98,9 +98,9 @@ Existem duas principais razões: * Isso quebraria a consistência entre `props` e `state`, causando problemas muito difíceis de debugar. * Isso tornaria algumas das novas funcionalidades em que estamos trabalhando impossíveis de implementar. -Esse [comentário no GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) se aprofunda em exemplos. +Esse [comentário no GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) se aprofunda em exemplos específicos. -### Eu devo usar uma biblioteca de gerenciamento de estado, como Redux ou MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx} +### Eu devo usar uma biblioteca de gerenciamento de state, como Redux ou MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx} [Talvez.](https://redux.js.org/faq/general#when-should-i-use-redux) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index cc6719c2f..16b7b3975 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -142,7 +142,7 @@ - id: faq-functions title: Passing Functions to Components - id: faq-state - title: Estado de componente + title: State dos Componentes - id: faq-styling title: Estilização e CSS - id: faq-structure From e13f8cabe97417328244e48b86a2fdb85f3f2f8b Mon Sep 17 00:00:00 2001 From: Halian Vilela Date: Tue, 26 Feb 2019 08:53:44 -0300 Subject: [PATCH 6/6] Fix title Co-Authored-By: vhfmag --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 2810dba6a..40b154a4e 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,6 +1,6 @@ --- id: faq-state -title: State do Componente +title: State dos Componentes permalink: docs/faq-state.html layout: docs category: FAQ