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: beta/src/content/learn/referencing-values-with-refs.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: 'Referenciar valores con refs'
4
4
5
5
<Intro>
6
6
7
-
Cuando quieres que un componente "recuerde" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar una *ref*.
7
+
Cuando quieres que un componente "recuerde" alguna información, pero no quieres que esa información [provoque nuevos renderizados](/learn/render-and-commit), puedes usar una *ref*.
8
8
9
9
</Intro>
10
10
@@ -25,7 +25,7 @@ Puedes añadir una ref a tu componente importando el Hook `useRef` desde React:
25
25
import { useRef } from'react';
26
26
```
27
27
28
-
Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, esta es una ref al valor `0`:
28
+
Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único argumento. Por ejemplo, esta es una ref al valor `0`:
29
29
30
30
```js
31
31
constref=useRef(0);
@@ -41,7 +41,7 @@ const ref = useRef(0);
41
41
42
42
<Illustrationsrc="/images/docs/illustrations/i_ref.png"alt="Una flecha con que tiene escrito 'current' metida en un bolsillo que tiene escrito 'ref'." />
43
43
44
-
Puedes acceder al valor actual de esa ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "puerta de escape" del flujo de datos de una vía de React: ¡Más sobre eso a continuación!)
44
+
Puedes acceder al valor actual de esa ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leerlo como modificarlo. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "puerta de escape" del flujo de datos de una vía de React: ¡Más sobre eso a continuación!)
45
45
46
46
Aquí, un botón incrementará `ref.current` en cada clic:
47
47
@@ -68,13 +68,13 @@ export default function Counter() {
68
68
69
69
</Sandpack>
70
70
71
-
La ref apunta hacia un número, pero, al igual que [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, la ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar.
71
+
La ref hace referencia a un número, pero, al igual que [el estado](/learn/state-a-components-memory), podrías hace referencia a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, la ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar.
72
72
73
-
Fíjate como **el componente no se rerenderiza con cada incremento.**Como el estado, React retiene las refs entre rerenderizados. Sin embargo, asignar el estado rerenderiza un componente. ¡Cambiar una ref no!
73
+
Fíjate como **el componente no se rerenderiza con cada incremento.**React (al igual que con el estado) preserva las refs entre rerenderizados. Sin embargo, asignar el estado rerenderiza un componente. ¡Cambiar una ref no!
74
74
75
75
## Ejemplo: crear un cronómetro {/*example-building-a-stopwatch*/}
76
76
77
-
Puedes combinar las refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información se usa para el renderizado, así que la guárdala en el estado:**
77
+
Puedes combinar las refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información se usa para el renderizado, así que guárdala en el estado:**
78
78
79
79
```js
80
80
const [startTime, setStartTime] =useState(null);
@@ -121,7 +121,7 @@ export default function Stopwatch() {
121
121
122
122
</Sandpack>
123
123
124
-
Cuando se presiona el botón "Detener", necesitas cancelar el intervalo existente para que deje de actualizar la variable `now` del estado. Puedes hacerlo llamando a [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada a `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no se usa para el renderizado, puedes guardarlo en una ref:**
124
+
Cuando se presiona el botón "Detener", necesitas cancelar el intervalo existente para que deje de actualizar la variable de estado `now`. Puedes hacerlo con una llamada a [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), pero necesitas pasarle el identificador del intervalo que fue previamente devuelto por la llamada a `setInterval` cuando el usuario presionó Iniciar. Necesitas guardar el identificador del intervalo en alguna parte. **Como el identificador de un intervalo no se usa para el renderizado, puedes guardarlo en una ref:**
125
125
126
126
<Sandpack>
127
127
@@ -288,7 +288,7 @@ Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más c
288
288
289
289
- Las refs son una puerta de escape para guardar valores que no se usan en el renderizado. No las necesitarás a menudo.
290
290
- Una ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, que puedes leer o asignarle un valor.
291
-
- Puedes pedirle a React que te de una ref llamando al Hook `useRef`.
291
+
- Puedes pedirle a React que te dé una ref llamando al Hook `useRef`.
292
292
- Como el estado, las refs retienen información entre los rerenderizados de un componente.
293
293
- A diferencia del estado, asignar el valor de `current` de una ref no desencadena un rerenderizado.
294
294
- No leas o escribas `ref.current` durante el renderizado. Esto hace que tu componente sea difícil de predecir.
0 commit comments