Skip to content

Commit 4179bad

Browse files
docs: translate compilationMode.md to Português (Brasil)
1 parent 630bc3f commit 4179bad

1 file changed

Lines changed: 49 additions & 49 deletions

File tree

src/content/reference/react-compiler/compilationMode.md

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,109 +4,109 @@ title: compilationMode
44

55
<Intro>
66

7-
The `compilationMode` option controls how the React Compiler selects which functions to compile.
7+
A opção `compilationMode` controla como o React Compiler seleciona quais funções compilar.
88

99
</Intro>
1010

1111
```js
1212
{
13-
compilationMode: 'infer' // or 'annotation', 'syntax', 'all'
13+
compilationMode: 'infer' // ou 'annotation', 'syntax', 'all'
1414
}
1515
```
1616

1717
<InlineToc />
1818

1919
---
2020

21-
## Reference {/*reference*/}
21+
## Referência {/*reference*/}
2222

2323
### `compilationMode` {/*compilationmode*/}
2424

25-
Controls the strategy for determining which functions the React Compiler will optimize.
25+
Controla a estratégia para determinar quais funções o React Compiler irá otimizar.
2626

27-
#### Type {/*type*/}
27+
#### Tipo {/*type*/}
2828

2929
```
3030
'infer' | 'syntax' | 'annotation' | 'all'
3131
```
3232

33-
#### Default value {/*default-value*/}
33+
#### Valor padrão {/*default-value*/}
3434

3535
`'infer'`
3636

37-
#### Options {/*options*/}
37+
#### Opções {/*options*/}
3838

39-
- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
40-
- Functions explicitly annotated with `"use memo"` directive
41-
- Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
39+
- **`'infer'`** (padrão): O compilador usa heurísticas inteligentes para identificar componentes e hooks do React:
40+
- Funções explicitamente anotadas com a diretiva `"use memo"`
41+
- Funções que são nomeadas como componentes (PascalCase) ou hooks (prefixo `use`) E criam JSX e/ou chamam outros hooks
4242

43-
- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
43+
- **`'annotation'`**: Compila apenas funções explicitamente marcadas com a diretiva `"use memo"`. Ideal para adoção incremental.
4444

45-
- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
45+
- **`'syntax'`**: Compila apenas componentes e hooks que usam a sintaxe de [componente](https://flow.org/en/docs/react/component-syntax/) e [hook](https://flow.org/en/docs/react/hook-syntax/) do Flow.
4646

47-
- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
47+
- **`'all'`**: Compila todas as funções de nível superior. Não recomendado, pois pode compilar funções que não são do React.
4848

49-
#### Caveats {/*caveats*/}
49+
#### Ressalvas {/*caveats*/}
5050

51-
- The `'infer'` mode requires functions to follow React naming conventions to be detected
52-
- Using `'all'` mode may negatively impact performance by compiling utility functions
53-
- The `'syntax'` mode requires Flow and won't work with TypeScript
54-
- Regardless of mode, functions with `"use no memo"` directive are always skipped
51+
- O modo `'infer'` requer que as funções sigam as convenções de nomenclatura do React para serem detectadas
52+
- Usar o modo `'all'` pode impactar negativamente o desempenho ao compilar funções utilitárias
53+
- O modo `'syntax'` requer Flow e não funcionará com TypeScript
54+
- Independentemente do modo, as funções com a diretiva `"use no memo"` são sempre ignoradas
5555

5656
---
5757

58-
## Usage {/*usage*/}
58+
## Uso {/*usage*/}
5959

60-
### Default inference mode {/*default-inference-mode*/}
60+
### Modo de inferência padrão {/*default-inference-mode*/}
6161

62-
The default `'infer'` mode works well for most codebases that follow React conventions:
62+
O modo padrão `'infer'` funciona bem para a maioria das bases de código que seguem as convenções do React:
6363

6464
```js
6565
{
6666
compilationMode: 'infer'
6767
}
6868
```
6969

70-
With this mode, these functions will be compiled:
70+
Com este modo, estas funções serão compiladas:
7171

7272
```js
73-
//Compiled: Named like a component + returns JSX
73+
//Compilado: Nomeado como um componente + retorna JSX
7474
function Button(props) {
7575
return <button>{props.label}</button>;
7676
}
7777

78-
//Compiled: Named like a hook + calls hooks
78+
//Compilado: Nomeado como um hook + chama hooks
7979
function useCounter() {
8080
const [count, setCount] = useState(0);
8181
return [count, setCount];
8282
}
8383

84-
//Compiled: Explicit directive
84+
//Compilado: Diretiva explícita
8585
function expensiveCalculation(data) {
8686
"use memo";
8787
return data.reduce(/* ... */);
8888
}
8989

90-
//Not compiled: Not a component/hook pattern
90+
//Não compilado: Não é um padrão de componente/hook
9191
function calculateTotal(items) {
9292
return items.reduce((a, b) => a + b, 0);
9393
}
9494
```
9595

96-
### Incremental adoption with annotation mode {/*incremental-adoption*/}
96+
### Adoção incremental com modo de anotação {/*incremental-adoption*/}
9797

98-
For gradual migration, use `'annotation'` mode to only compile marked functions:
98+
Para migração gradual, use o modo `'annotation'` para compilar apenas funções marcadas:
9999

100100
```js
101101
{
102102
compilationMode: 'annotation'
103103
}
104104
```
105105

106-
Then explicitly mark functions to compile:
106+
Em seguida, marque explicitamente as funções para compilar:
107107

108108
```js
109-
// Only this function will be compiled
109+
// Apenas esta função será compilada
110110
function ExpensiveList(props) {
111111
"use memo";
112112
return (
@@ -118,51 +118,51 @@ function ExpensiveList(props) {
118118
);
119119
}
120120

121-
// This won't be compiled without the directive
121+
// Isso não será compilado sem a diretiva
122122
function NormalComponent(props) {
123123
return <div>{props.content}</div>;
124124
}
125125
```
126126

127-
### Using Flow syntax mode {/*flow-syntax-mode*/}
127+
### Usando o modo de sintaxe do Flow {/*flow-syntax-mode*/}
128128

129-
If your codebase uses Flow instead of TypeScript:
129+
Se sua base de código usa Flow em vez de TypeScript:
130130

131131
```js
132132
{
133133
compilationMode: 'syntax'
134134
}
135135
```
136136

137-
Then use Flow's component syntax:
137+
Em seguida, use a sintaxe de componente do Flow:
138138

139139
```js
140-
// Compiled: Flow component syntax
140+
// Compilado: Sintaxe de componente Flow
141141
component Button(label: string) {
142142
return <button>{label}</button>;
143143
}
144144

145-
// Compiled: Flow hook syntax
145+
// Compilado: Sintaxe de hook Flow
146146
hook useCounter(initial: number) {
147147
const [count, setCount] = useState(initial);
148148
return [count, setCount];
149149
}
150150

151-
// Not compiled: Regular function syntax
151+
// Não compilado: Sintaxe de função regular
152152
function helper(data) {
153153
return process(data);
154154
}
155155
```
156156

157-
### Opting out specific functions {/*opting-out*/}
157+
### Excluindo funções específicas {/*opting-out*/}
158158

159-
Regardless of compilation mode, use `"use no memo"` to skip compilation:
159+
Independentemente do modo de compilação, use `"use no memo"` para pular a compilação:
160160

161161
```js
162162
function ComponentWithSideEffects() {
163-
"use no memo"; // Prevent compilation
163+
"use no memo"; // Evitar compilação
164164

165-
// This component has side effects that shouldn't be memoized
165+
// Este componente tem efeitos colaterais que não devem ser memorizados
166166
logToAnalytics('component_rendered');
167167

168168
return <div>Content</div>;
@@ -171,31 +171,31 @@ function ComponentWithSideEffects() {
171171

172172
---
173173

174-
## Troubleshooting {/*troubleshooting*/}
174+
## Solução de problemas {/*troubleshooting*/}
175175

176-
### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
176+
### Componente não sendo compilado no modo infer {/*component-not-compiled-infer*/}
177177

178-
In `'infer'` mode, ensure your component follows React conventions:
178+
No modo `'infer'`, certifique-se de que seu componente siga as convenções do React:
179179

180180
```js
181-
//Won't be compiled: lowercase name
181+
//Não será compilado: nome em minúsculas
182182
function button(props) {
183183
return <button>{props.label}</button>;
184184
}
185185

186-
//Will be compiled: PascalCase name
186+
//Será compilado: nome PascalCase
187187
function Button(props) {
188188
return <button>{props.label}</button>;
189189
}
190190

191-
//Won't be compiled: doesn't create JSX or call hooks
191+
//Não será compilado: não cria JSX ou chama hooks
192192
function useData() {
193193
return window.localStorage.getItem('data');
194194
}
195195

196-
//Will be compiled: calls a hook
196+
//Será compilado: chama um hook
197197
function useData() {
198198
const [data] = useState(() => window.localStorage.getItem('data'));
199199
return data;
200200
}
201-
```
201+
```

0 commit comments

Comments
 (0)