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-rules.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -6,15 +6,15 @@ next: hooks-custom.html
6
6
prev: hooks-effect.html
7
7
---
8
8
9
-
Los *Hooks* son una de las próximas funcionalidades que te permitirá usar el estado y otras caracteristicas de React sin tener que escribir una clase. Actualmente están disponibles en la versión de React v16.8.0-alpha.1.
9
+
Los Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase.
10
10
11
11
Los Hooks son funciones de JavaScript, pero necesitas seguir dos reglas cuando los uses. Proporcionamos un [plugin de linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) para hacer cumplir estas reglas automáticamente.
12
12
13
-
### Llama Hooks solo en el nivel superior
13
+
### Llama Hooks solo en el nivel superior {#only-call-hooks-at-the-top-level}
14
14
15
15
**No llames Hooks dentro de ciclos, condicionales, or funciones anidadas.** En vez de eso, usa siempre Hooks en el nivel superior de tu función en React. Siguiendo esta regla, te aseguras de que los hooks se llamen en el mismo orden cada vez que un componente se renderiza. Esto es lo que permite a React preservar correctamente el estado de los hooks entre multiples llamados a `useState` y `useEffect`. (Si eres curioso, vamos a explicar esto en detalle [más abajo](#explicación).)
16
16
17
-
### Llama Hooks solo en funciones de React
17
+
### Llama Hooks solo en funciones de React {#only-call-hooks-from-react-functions}
18
18
19
19
**No llames Hooks desde funciones JavaScript regulares.** En vez de eso, puedes:
20
20
@@ -23,7 +23,7 @@ Los Hooks son funciones de JavaScript, pero necesitas seguir dos reglas cuando l
23
23
24
24
Siguiendo esta regla, te aseguras de que toda la lógica del estado de un componente sea claramente visible desde tu código fuente.
25
25
26
-
## Plugin de ESLint
26
+
## Plugin de ESLint {#eslint-plugin}
27
27
28
28
Lanzamos un plugin de ESLint llamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que refuerza estas dos reglas. Puedes añadir este plugin a tu proyecto si quieres probarlo:
29
29
@@ -49,7 +49,7 @@ En el futuro, tenemos la intención de incluir este plugin por defecto en Create
49
49
50
50
**Puedes pasar a la siguiente página donde explicamos como escribir [tus propios Hooks](/docs/hooks-custom.html) ahora mismo.** En esta página, vamos a continuar explicando el razonamiento detrás de estas reglas.
51
51
52
-
## Explicación
52
+
## Explicación {#explanation}
53
53
54
54
Como [aprendimos anteriormente](/docs/hooks-state.html#tip-using-multiple-state-variables), podemos usar multiples Hooks de Estado o Hooks de Efecto en un solo componente:
55
55
@@ -132,6 +132,6 @@ React no sabría que devolver para la segunda llamada del Hook `useState`. React
132
132
133
133
**Ten en cuenta que no necesitas preocuparte por este problema si usas las [reglas de lint provistas](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Pero ahora también sabes *por qué* los Hooks funcionan de esta manera, y cuáles son los problemas que la primera regla está impidiendo.
134
134
135
-
## Siguientes pasos
135
+
## Siguientes pasos {#next-steps}
136
136
137
137
Finalmente, estamos listos para aprender acerca de cómo [escribir nuestros propios Hooks](/docs/hooks-custom.html)! Los Hooks personalizados te permiten combinar los Hooks proporcionados por React en sus propias abstracciones y reutilizar la lógica de estado común entre los diferentes componentes.
0 commit comments