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: content/docs/hooks-overview.md
+8-28Lines changed: 8 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -16,11 +16,7 @@ Hooks son [compatibles con versiones anteriores](/docs/hooks-intro.html#no-break
16
16
17
17
**↑↑↑ Cada sección termina con un recuadro amarillo como este.** Ellos vinculan a explicaciones detalladas.
18
18
19
-
<<<<<<< HEAD
20
-
## 📌 Hook de Estado {#-state-hook}
21
-
=======
22
-
## 📌 State Hook {#state-hook}
23
-
>>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38
19
+
## 📌 Hook de Estado {#state-hook}
24
20
25
21
Este ejemplo renderiza un contador. Cuando haces click en el botón, incrementa el valor:
26
22
@@ -60,7 +56,7 @@ function ExampleWithManyStates() {
60
56
}
61
57
```
62
58
63
-
La sintáxis de [desestructuración de un array] (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment) nos permite dar diferentes nombres a las variables de estado que declaramos llamando a `useState `. Estos nombres no forman parte de la API `useState`. En su lugar, React asume que si llamas a `useState` muchas veces, lo haces en el mismo orden durante cada renderizado. Volveremos a explicar por qué esto funciona y cuándo será útil más adelante.
59
+
La sintaxis de [desestructuración de un array] (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment) nos permite dar diferentes nombres a las variables de estado que declaramos llamando a `useState `. Estos nombres no forman parte de la API `useState`. En su lugar, React asume que si llamas a `useState` muchas veces, lo haces en el mismo orden durante cada renderizado. Volveremos a explicar por qué esto funciona y cuándo será útil más adelante.
64
60
65
61
#### Pero qué es un Hook? {#but-what-is-a-hook}
66
62
@@ -70,13 +66,9 @@ React proporciona algunos Hooks incorporados como `useState`. También puedes cr
70
66
71
67
>Explicación Detallada
72
68
>
73
-
>Puedes aprender más sobre el Hook de Estado en la pagina dedicada: [Usando el Hook de Estado](/docs/hooks-state.html).
69
+
>Puedes aprender más sobre el Hook de Estado en la página dedicada: [Usando el Hook de Estado](/docs/hooks-state.html).
74
70
75
-
<<<<<<< HEAD
76
-
## ⚡️ Hook de Efecto {#️-effect-hook}
77
-
=======
78
-
## ⚡️ Effect Hook {#effect-hook}
79
-
>>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38
71
+
## ⚡️ Hook de Efecto {#️effect-hook}
80
72
81
73
Es probable que hayas realizado recuperación de datos, suscripciones o modificacion manual del DOM desde los componentes de React. Llamamos a estas operaciones "efectos secundarios" (o "efectos" para abreviar) porque pueden afectar a otros componentes y no se pueden hacer durante el renderizado.
82
74
@@ -167,11 +159,7 @@ Los Hooks te permiten organizar efectos secundarios en un componente según qué
167
159
>
168
160
> Puede obtener más información sobre `useEffect` en la página dedicada: [Usando el Hook de Efecto](/docs/hooks-effect.html).
169
161
170
-
<<<<<<< HEAD
171
-
## ✌️ Reglas de Hooks {#️-rules-of-hooks}
172
-
=======
173
-
## ✌️ Rules of Hooks {#rules-of-hooks}
174
-
>>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38
162
+
## ✌️ Reglas de Hooks {#️rules-of-hooks}
175
163
176
164
Hooks son funciones de JavaScript, pero imponen dos reglas adicionales:
177
165
@@ -184,11 +172,7 @@ Proporcionamos un [plugin de linter](https://www.npmjs.com/package/eslint-plugin
184
172
>
185
173
>Puedes aprender más sobre estas reglas en la página dedicada: [Reglas de Hooks](/docs/hooks-rules.html).
186
174
187
-
<<<<<<< HEAD
188
-
## 💡 Construyendo Tus Propios Hooks {#-building-your-own-hooks}
189
-
=======
190
-
## 💡 Building Your Own Hooks {#building-your-own-hooks}
191
-
>>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38
175
+
## 💡 Construyendo Tus Propios Hooks {#building-your-own-hooks}
192
176
193
177
A veces, queremos reutilizar alguna lógica de estado entre componentes. Tradicionalmente, había dos soluciones populares para este problema: [componente de orden superior](/docs/higher-order-components.html) y [render props](/docs/render-props.html). Los Hooks personalizados te permiten hacer esto, pero sin agregar más componentes a tu árbol.
194
178
@@ -255,11 +239,7 @@ Puedes escribir Hooks personalizados que cubran una amplia gama de casos de uso
255
239
>
256
240
>>Puedes aprender más sobre Hooks personalizados en la página dedicada: [Construyendo Tus Propios Hooks](/docs/hooks-custom.html).
257
241
258
-
<<<<<<< HEAD
259
-
## 🔌 Otros Hooks {#-other-hooks}
260
-
=======
261
-
## 🔌 Other Hooks {#other-hooks}
262
-
>>>>>>> 99e97c33ae1a12d65c872361250f3ac92b043f38
242
+
## 🔌 Otros Hooks {#other-hooks}
263
243
264
244
Hay algunos Hooks incorporados de uso menos común que pueden resultarte útiles. Por ejemplo, [`useContext`](/docs/hooks-reference.html#usecontext) te permite suscribirte al contexto React sin introducir el anidamiento:
265
245
@@ -285,7 +265,7 @@ function Todos() {
285
265
286
266
## Próximos Pasos {#next-steps}
287
267
288
-
¡Uf, eso fue rápido! Si algunas cosas no te hacen mucho sentido o si te gustaria aprender más en detalle, puedes leer las siguientes páginas, comenzando con la documentación de [Hook de Estado](/docs/hooks-state.html).
268
+
¡Uf, eso fue rápido! Si algunas cosas no te hacen mucho sentido o si te gustaría aprender más en detalle, puedes leer las siguientes páginas, comenzando con la documentación de [Hook de Estado](/docs/hooks-state.html).
289
269
290
270
También puede consultar la [Referencia de la Hooks API](/docs/hooks-reference.html) y las [Preguntas Frecuentes sobre Hooks](/docs/hooks-faq.html).
0 commit comments