You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/PureComponent.md
+18-19
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: PureComponent
4
4
5
5
<Pitfall>
6
6
7
-
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
7
+
Recomendamos definir componentes como funções em vez de classes. [Veja como migrar.](#alternatives)
8
8
9
9
</Pitfall>
10
10
11
11
<Intro>
12
12
13
-
`PureComponent`is similar to[`Component`](/reference/react/Component) but it skips re-renders for same props and state. Class components are still supported by React, but we don't recommend using them in new code.
13
+
`PureComponent`é similar a[`Component`](/reference/react/Component), mas ele pula as re-renderizações para as mesmas props e state. Componentes de classe ainda são suportados pelo React, mas não recomendamos usá-los em código novo.
14
14
15
15
```js
16
16
classGreetingextendsPureComponent {
@@ -26,11 +26,11 @@ class Greeting extends PureComponent {
26
26
27
27
---
28
28
29
-
## Reference {/*reference*/}
29
+
## Referência {/*reference*/}
30
30
31
31
### `PureComponent` {/*purecomponent*/}
32
32
33
-
To skip re-rendering a class component for same props and state, extend`PureComponent`instead of[`Component`:](/reference/react/Component)
33
+
Para pular a re-renderização de um componente de classe para as mesmas props e state, estenda`PureComponent`em vez de[`Component`:](/reference/react/Component)
34
34
35
35
```js
36
36
import { PureComponent } from'react';
@@ -42,18 +42,17 @@ class Greeting extends PureComponent {
42
42
}
43
43
```
44
44
45
-
`PureComponent`is a subclass of`Component`and supports [all the `Component` APIs.](/reference/react/Component#reference)Extending`PureComponent`is equivalent to defining a custom[`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate)method that shallowly compares props and state.
45
+
`PureComponent`é uma subclasse de`Component`e suporta [todas as APIs de `Component`.](/reference/react/Component#reference)Estender`PureComponent`é equivalente a definir um método[`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate)customizado que compara superficialmente as props e o state.
46
46
47
-
48
-
[See more examples below.](#usage)
47
+
[Veja mais exemplos abaixo.](#usage)
49
48
50
49
---
51
50
52
-
## Usage {/*usage*/}
51
+
## Uso {/*usage*/}
53
52
54
-
### Skipping unnecessary re-renders for class components {/*skipping-unnecessary-re-renders-for-class-components*/}
53
+
### Pulando re-renderizações desnecessárias para componentes de classe {/*skipping-unnecessary-re-renders-for-class-components*/}
55
54
56
-
React normally re-renders a component whenever its parent re-renders. As an optimization, you can create a component that React will not re-render when its parent re-renders so long as its new props and state are the same as the old props and state. [Class components](/reference/react/Component)can opt into this behavior by extending`PureComponent`:
55
+
O React normalmente re-renderiza um componente sempre que seu pai re-renderiza. Como uma otimização, você pode criar um componente que o React não re-renderizará quando seu pai re-renderizar, desde que suas novas props e state sejam as mesmas das props e state antigas. [Componentes de classe](/reference/react/Component)podem optar por este comportamento estendendo`PureComponent`:
57
56
58
57
```js {1}
59
58
classGreetingextendsPureComponent {
@@ -63,9 +62,9 @@ class Greeting extends PureComponent {
63
62
}
64
63
```
65
64
66
-
A React component should always have [pure rendering logic.](/learn/keeping-components-pure)This means that it must return the same output if its props, state, and context haven't changed. By using`PureComponent`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props and state haven't changed. However, your component will still re-render if a context that it's using changes.
65
+
Um componente React sempre deve ter [lógica de renderização pura.](/learn/keeping-components-pure)Isso significa que deve retornar a mesma saída se suas props, state e contexto não mudaram. Ao usar`PureComponent`, você está dizendo ao React que seu componente está em conformidade com esse requisito, portanto, o React não precisa re-renderizar, desde que suas props e o state não tenham mudado. No entanto, seu componente ainda será re-renderizado se um contexto que ele estiver usando mudar.
67
66
68
-
In this example, notice that the `Greeting`component re-renders whenever `name`is changed (because that's one of its props), but not when`address`is changed (because it's not passed to`Greeting`as a prop):
67
+
Neste exemplo, observe que o componente `Greeting` re-renderiza sempre que `name`é alterado (porque essa é uma de suas props), mas não quando`address`é alterado (porque não é passado para`Greeting`como uma prop):
69
68
70
69
<Sandpack>
71
70
@@ -109,17 +108,17 @@ label {
109
108
110
109
<Pitfall>
111
110
112
-
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
111
+
Recomendamos definir componentes como funções em vez de classes. [Veja como migrar.](#alternatives)
113
112
114
113
</Pitfall>
115
114
116
115
---
117
116
118
-
## Alternatives {/*alternatives*/}
117
+
## Alternativas {/*alternatives*/}
119
118
120
-
### Migrating from a `PureComponent`class component to a function {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
119
+
### Migrando de um componente de classe `PureComponent`para uma função {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
121
120
122
-
We recommend using function components instead of [class components](/reference/react/Component)in new code. If you have some existing class components using `PureComponent`, here is how you can convert them. This is the original code:
121
+
Recomendamos o uso de componentes de função em vez de [componentes de classe](/reference/react/Component)em código novo. Se você tiver alguns componentes de classe existentes usando `PureComponent`, aqui está como você pode convertê-los. Este é o código original:
123
122
124
123
<Sandpack>
125
124
@@ -161,7 +160,7 @@ label {
161
160
162
161
</Sandpack>
163
162
164
-
When you [convert this component from a class to a function,](/reference/react/Component#alternatives)wrap it in[`memo`:](/reference/react/memo)
163
+
Quando você [converte este componente de uma classe para uma função,](/reference/react/Component#alternatives)encapsule-o em[`memo`:](/reference/react/memo)
165
164
166
165
<Sandpack>
167
166
@@ -203,6 +202,6 @@ label {
203
202
204
203
<Note>
205
204
206
-
Unlike `PureComponent`, [`memo`](/reference/react/memo)does not compare the new and the old state. In function components, calling the [`set` function](/reference/react/useState#setstate)with the same state [already prevents re-renders by default,](/reference/react/memo#updating-a-memoized-component-using-state)even without`memo`.
205
+
Ao contrário de `PureComponent`, [`memo`](/reference/react/memo)não compara o novo e o antigo state. Em componentes de função, chamar a função [`set`](/reference/react/useState#setstate)com o mesmo state [já evita re-renderizações por padrão,](/reference/react/memo#updating-a-memoized-component-using-state)mesmo sem`memo`.
0 commit comments