Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-Authored-By: vhfmag <[email protected]>
  • Loading branch information
halian-vilela and vhfmag authored Feb 26, 2019
1 parent 0a8bd8a commit c2fa1a4
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 13 deletions.
24 changes: 12 additions & 12 deletions content/docs/faq-state.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: faq-state
title: Estado de componente
title: State do Componente
permalink: docs/faq-state.html
layout: docs
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}

Expand All @@ -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` 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:

Expand All @@ -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.

Expand All @@ -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}
});
}
Expand All @@ -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.
}
```

Expand All @@ -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.

Expand All @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion content/docs/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit c2fa1a4

Please sign in to comment.