Skip to content

Commit 3c4dd5d

Browse files
Translate PureComponent.md to Portuguese (#1041)
1 parent 03ffc0b commit 3c4dd5d

File tree

1 file changed

+18
-19
lines changed

1 file changed

+18
-19
lines changed

src/content/reference/react/PureComponent.md

+18-19
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ title: PureComponent
44

55
<Pitfall>
66

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)
88

99
</Pitfall>
1010

1111
<Intro>
1212

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.
1414

1515
```js
1616
class Greeting extends PureComponent {
@@ -26,11 +26,11 @@ class Greeting extends PureComponent {
2626

2727
---
2828

29-
## Reference {/*reference*/}
29+
## Referência {/*reference*/}
3030

3131
### `PureComponent` {/*purecomponent*/}
3232

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)
3434

3535
```js
3636
import { PureComponent } from 'react';
@@ -42,18 +42,17 @@ class Greeting extends PureComponent {
4242
}
4343
```
4444

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.
4646

47-
48-
[See more examples below.](#usage)
47+
[Veja mais exemplos abaixo.](#usage)
4948

5049
---
5150

52-
## Usage {/*usage*/}
51+
## Uso {/*usage*/}
5352

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*/}
5554

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`:
5756

5857
```js {1}
5958
class Greeting extends PureComponent {
@@ -63,9 +62,9 @@ class Greeting extends PureComponent {
6362
}
6463
```
6564

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.
6766

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):
6968

7069
<Sandpack>
7170

@@ -109,17 +108,17 @@ label {
109108

110109
<Pitfall>
111110

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)
113112

114113
</Pitfall>
115114

116115
---
117116

118-
## Alternatives {/*alternatives*/}
117+
## Alternativas {/*alternatives*/}
119118

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*/}
121120

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:
123122

124123
<Sandpack>
125124

@@ -161,7 +160,7 @@ label {
161160

162161
</Sandpack>
163162

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)
165164

166165
<Sandpack>
167166

@@ -203,6 +202,6 @@ label {
203202

204203
<Note>
205204

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`.
207206

208-
</Note>
207+
</Note>

0 commit comments

Comments
 (0)