Skip to content

Commit 6b04f22

Browse files
vhfmaghalian-vilela
authored andcommitted
Translate "State dos Componentes" no FAQ (reactjs#129)
* Traduzir "Estado de componente" no FAQ * Apply fixes from code review Co-Authored-By: vhfmag <[email protected]> * Add missing article, try new sentence structure * Fix event handler translation to match convention * Apply suggestions from code review Co-Authored-By: vhfmag <[email protected]> * Fix title Co-Authored-By: vhfmag <[email protected]>
1 parent 8501b4e commit 6b04f22

File tree

2 files changed

+43
-42
lines changed

2 files changed

+43
-42
lines changed

content/docs/faq-state.md

+42-41
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,107 @@
11
---
22
id: faq-state
3-
title: Component State
3+
title: State dos Componentes
44
permalink: docs/faq-state.html
55
layout: docs
66
category: FAQ
77
---
88

9-
### What does `setState` do? {#what-does-setstate-do}
9+
### O que `setState` faz? {#what-does-setstate-do}
1010

11-
`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering.
11+
`setState()` agenda uma atualização para o objeto `state` de um componente. Quando o state muda, o componente responde renderizando novamente.
1212

13-
### What is the difference between `state` and `props`? {#what-is-the-difference-between-state-and-props}
13+
### Qual é a diferença entre `state` e `props`? {#what-is-the-difference-between-state-and-props}
1414

15-
[`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).
15+
[`props`](/docs/components-and-props.html) (abreviação de "<i lang="en">properties</i>") 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).
16+
17+
Aqui estão alguns bons recursos para ler mais sobre quando usar `props` vs `state` (ambos em inglês):
1618

17-
Here are some good resources for further reading on when to use `props` vs `state`:
1819
* [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
1920
* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
2021

21-
### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value}
22+
### Por que `setState` está me dando o valor errado? {#why-is-setstate-giving-me-the-wrong-value}
2223

23-
In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen.
24+
Em React, tanto `this.props` quanto `this.state` representam os valores *renderizados*, ou seja, o que está atualmente na tela.
2425

25-
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).
26+
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).
2627

27-
Example of code that will *not* behave as expected:
28+
Exemplo de código que *não* vai funcionar como esperado:
2829

2930
```jsx
3031
incrementCount() {
31-
// Note: this will *not* work as intended.
32+
// Nota: isso *não* vai funcionar como esperado.
3233
this.setState({count: this.state.count + 1});
3334
}
3435

3536
handleSomething() {
36-
// Let's say `this.state.count` starts at 0.
37+
// Digamos que `this.state.count` começa em 0.
3738
this.incrementCount();
3839
this.incrementCount();
3940
this.incrementCount();
40-
// When React re-renders the component, `this.state.count` will be 1, but you expected 3.
41+
// Quando o React renderizar novamente o componente, `this.state.count` será 1, mas você esperava 3.
4142

42-
// This is because `incrementCount()` function above reads from `this.state.count`,
43-
// but React doesn't update `this.state.count` until the component is re-rendered.
44-
// So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1.
43+
// Isso é porque a função `incrementCount()` usa `this.state.count`,
44+
// mas o React não atualiza `this.state.count` até o componente ser renderizado novamente.
45+
// Então `incrementCount()` acaba lendo `this.state.count` como 0 todas as vezes, e muda seu valor para 1.
4546

46-
// The fix is described below!
47+
// A solução é exibida abaixo!
4748
}
4849
```
4950

50-
See below for how to fix this problem.
51+
Veja abaixo como solucionar esse problema.
5152

52-
### 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}
53+
### 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}
5354

54-
Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below).
55+
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).
5556

56-
### 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}
57+
### 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}
5758

58-
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:
59+
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:
5960

6061
```jsx
6162
incrementCount() {
6263
this.setState((state) => {
63-
// Important: read `state` instead of `this.state` when updating.
64+
// Importante: use `state` em vez de `this.state` quando estiver atualizando.
6465
return {count: state.count + 1}
6566
});
6667
}
6768

6869
handleSomething() {
69-
// Let's say `this.state.count` starts at 0.
70+
// Digamos que `this.state.count` começa em 0.
7071
this.incrementCount();
7172
this.incrementCount();
7273
this.incrementCount();
7374

74-
// If you read `this.state.count` now, it would still be 0.
75-
// But when React re-renders the component, it will be 3.
75+
// Se você ler `this.state.count` agora, ele ainda seria 0.
76+
// Mas quando o React renderizar novamente o componente, ele será 3.
7677
}
7778
```
7879

79-
[Learn more about setState](/docs/react-component.html#setstate)
80+
[Saiba mais sobre setState](/docs/react-component.html#setstate)
8081

81-
### When is `setState` asynchronous? {#when-is-setstate-asynchronous}
82+
### Quando `setState` é assíncrono? {#when-is-setstate-asynchronous}
8283

83-
Currently, `setState` is asynchronous inside event handlers.
84+
Atualmente, `setState` é assíncrono dentro de manipuladores de evento.
8485

85-
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.
86+
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.
8687

87-
This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases.
88+
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.
8889

89-
### Why doesn't React update `this.state` synchronously? {#why-doesnt-react-update-thisstate-synchronously}
90+
### Por que o React não atualiza `this.state` síncronamente? {#why-doesnt-react-update-thisstate-synchronously}
9091

91-
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.
92+
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.
9293

93-
However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering.
94+
No entanto, você pode ainda estar se perguntando porque o React simplesmene não atualiza `this.state` imediatamente, sem renderizar novamente.
9495

95-
There are two main reasons:
96+
Existem duas principais razões:
9697

97-
* This would break the consistency between `props` and `state`, causing issues that are very hard to debug.
98-
* This would make some of the new features we're working on impossible to implement.
98+
* Isso quebraria a consistência entre `props` e `state`, causando problemas muito difíceis de debugar.
99+
* Isso tornaria algumas das novas funcionalidades em que estamos trabalhando impossíveis de implementar.
99100

100-
This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples.
101+
Esse [comentário no GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) se aprofunda em exemplos específicos.
101102

102-
### Should I use a state management library like Redux or MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
103+
### Eu devo usar uma biblioteca de gerenciamento de state, como Redux ou MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
103104

104-
[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux)
105+
[Talvez.](https://redux.js.org/faq/general#when-should-i-use-redux)
105106

106-
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.
107+
É uma boa ideia se aprofundar em React primeiro, antes de adicionar bibliotecas. Você pode fazer aplicativos bastante complexos apenas com React.

content/docs/nav.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
- id: faq-functions
143143
title: Passing Functions to Components
144144
- id: faq-state
145-
title: Component State
145+
title: State dos Componentes
146146
- id: faq-styling
147147
title: Estilização e CSS
148148
- id: faq-structure

0 commit comments

Comments
 (0)