From 89d4bdbb5d2630a89f3cc1864f068c4d98d18a3f Mon Sep 17 00:00:00 2001 From: Giu Magnani Date: Mon, 4 Feb 2019 23:41:02 +0100 Subject: [PATCH 01/13] Add translation for "Component State" --- content/docs/faq-state.md | 82 +++++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 81b677a76..9cfb1b434 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,106 +1,106 @@ --- id: faq-state -title: Component State +title: Estado del Componente permalink: docs/faq-state.html layout: docs category: FAQ --- -### What does `setState` do? +### Qué hace `setState`? -`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. +`setState()` programa una actualización al objeto `estado` de un componente. Cuando el estado cambia, el componente responde volviendo a renderizar. -### What is the difference between `state` and `props`? +### ¿Cuál es la diferencia entre `estado` y `props`? -[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function). +[`props`](/docs/components-and-props.html) (abreviatura de "properties") y [`estado`](/docs/state-and-lifecycle.html) son objetos planos de JavaScript. Mientras ambos contienen información que influye en el resultado del render, son diferentes debido a una importante razón: `props` se pasa *al* componente (similar a los parámetros de una función) mientras que `estado` se administra *dentro* del componente (similar a las variables declaradas dentro de una función). -Here are some good resources for further reading on when to use `props` vs `state`: +Aquí hay algunos buenos recursos para leer más sobre cuándo usar `props` vs `estado`: * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/) -### Why is `setState` giving me the wrong value? +### ¿Por qué `setState` me está dando el valor incorrecto? -In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen. +En React, tanto `this.props` como `this.state` representan los valores *renderizados*, es decir, lo que hay actualmente en la pantalla. -Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details). +Las llamadas a `setState` son asíncronas; no te fíes de que `this.state` refleje el nuevo valor inmediatamente después de llamar a `setState`. Pasa una función de actualización en lugar de un objeto si necesitas calcular valores en función del estado actual (revisa a continuación para más detalles). -Example of code that will *not* behave as expected: +Ejemplo de código que *no* se comportará como se espera: ```jsx incrementCount() { - // Note: this will *not* work as intended. + // Nota: esto *no* funcionará como se espera. this.setState({count: this.state.count + 1}); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // Digamos que `this.state.count` inicia en 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); - // When React re-renders the component, `this.state.count` will be 1, but you expected 3. + // Cuando React re-renderiza el componente, `this.state.count` será 1, pero tu esperabas 3. - // This is because `incrementCount()` function above reads from `this.state.count`, - // but React doesn't update `this.state.count` until the component is re-rendered. - // So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1. + // Esto es porque la función anterior `incrementCount()` lee de `this.state.count`, + // pero React no actualiza `this.state.count` hasta que el componente se vuelve a renderizar. + // Entonces `incrementCount()` termina leyendo `this.state.count` como 0 cada vez, y lo establece a 1. - // The fix is described below! + // La solución se describe a continuación! } ``` -See below for how to fix this problem. +Ve a continuación cómo solucionar este problema. -### How do I update state with values that depend on the current state? +### ¿Cómo actualizo el estado con valores que dependen del estado actual? -Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below). +Pasa una función en lugar de un objeto a `setState` para asegurarte de que la llamada siempre use la versión más actualizada del estado (ver más abajo). -### What is the difference between passing an object or a function in `setState`? +### ¿Cuál es la diferencia entre pasar un objeto o una función en `setState`? -Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting: +Pasar una función de actualización te permite acceder al valor del estado actual dentro del actualizador. Dado que las llamadas a `setState` son por lotes, esto te permite encadenar actualizaciones y asegurarte de que se construyan una encima de otra en lugar de generar conflictos: ```jsx incrementCount() { this.setState((state) => { - // Important: read `state` instead of `this.state` when updating. + // Importante: lee `state` en vez de `this.state` al actualizar. return {count: state.count + 1} }); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // Digamos que `this.state.count` inicia en 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); - // If you read `this.state.count` now, it would still be 0. - // But when React re-renders the component, it will be 3. + // Si lees `this.state.count` ahora, aún sería 0. + // Pero cuando React vuelva a renderizar el componente, será 3. } ``` -[Learn more about setState](/docs/react-component.html#setstate) +[Aprende más sobre setState](/docs/react-component.html#setstate) -### When is `setState` asynchronous? +### ¿Cuándo `setState` es asíncrono? -Currently, `setState` is asynchronous inside event handlers. +Actualmente, `setState` es asíncrono dentro de los controladores de eventos. -This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps. +Esto garantiza, por ejemplo, que si `Parent` y `Child` llaman a `setState` durante un evento de click, `Child` no se renderiza dos veces. En su lugar, React "vacía" las actualizaciones del estado al final del evento del navegador. Esto se traduce en mejoras significativas de rendimiento en aplicaciones más grandes. -This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases. +Este es un detalle de implementación, así que evita confiar en él directamente. En las versiones futuras, React realizará actualizaciones por lotes por defecto en más casos. -### Why doesn't React update `this.state` synchronously? +### ¿Por qué React no actualiza `this.state` de forma sincrónica? -As explained in the previous section, React intentionally "waits" until all components call `setState()` in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders. +Como se explicó en la sección anterior, React intencionalmente "espera" hasta que todos los componentes llamen a `setState()` en sus controladores de eventos antes de comenzar a re-renderizar. Esto aumenta el rendimiento al evitar re-renderizados innecesarios. -However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering. +Sin embargo, es posible que aún te estés preguntando por qué React no solo actualiza 'this.state' inmediatamente sin volver a renderizar. -There are two main reasons: +Hay dos razones principales: -* This would break the consistency between `props` and `state`, causing issues that are very hard to debug. -* This would make some of the new features we're working on impossible to implement. +* Esto rompería la consistencia entre `props` y `estado`, causando problemas que son muy difíciles de depurar. +* Esto haría que algunas de las nuevas funcionalidades en las que estamos trabajando sean imposibles de implementar. -This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples. +Este [comentario de GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) profundiza en los ejemplos específicos. -### Should I use a state management library like Redux or MobX? +### ¿Debo usar una librería de manejo de estado como Redux o MobX? -[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux) +[Tal vez.](https://redux.js.org/faq/general#when-should-i-use-redux) -It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React. +Es una buena idea conocer primero React, antes de agregar librerías adicionales. Puedes construir aplicaciones bastante complejas usando solo React. From 035b708937ffa35d9893e40e8e54b8a3f215afaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:19:13 +0100 Subject: [PATCH 02/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 9cfb1b434..784d768bf 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,6 +1,6 @@ --- id: faq-state -title: Estado del Componente +title: Estado del componente permalink: docs/faq-state.html layout: docs category: FAQ From 9433ef5119a10feab7dc4b456cae809ab00b31a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:19:36 +0100 Subject: [PATCH 03/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 784d768bf..3eca2118f 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -6,7 +6,7 @@ layout: docs category: FAQ --- -### Qué hace `setState`? +### ¿Qué hace `setState`? `setState()` programa una actualización al objeto `estado` de un componente. Cuando el estado cambia, el componente responde volviendo a renderizar. From 1a22413a49f59b7ee0f773848b5a5874e426568a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:19:53 +0100 Subject: [PATCH 04/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 3eca2118f..a87dd8dab 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -10,7 +10,7 @@ category: FAQ `setState()` programa una actualización al objeto `estado` de un componente. Cuando el estado cambia, el componente responde volviendo a renderizar. -### ¿Cuál es la diferencia entre `estado` y `props`? +### ¿Cuál es la diferencia entre `state` y `props`? [`props`](/docs/components-and-props.html) (abreviatura de "properties") y [`estado`](/docs/state-and-lifecycle.html) son objetos planos de JavaScript. Mientras ambos contienen información que influye en el resultado del render, son diferentes debido a una importante razón: `props` se pasa *al* componente (similar a los parámetros de una función) mientras que `estado` se administra *dentro* del componente (similar a las variables declaradas dentro de una función). From b1f749af5775d74a691fe0784193bd36e7aec5cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:22:14 +0100 Subject: [PATCH 05/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index a87dd8dab..aab933a65 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -14,7 +14,7 @@ category: FAQ [`props`](/docs/components-and-props.html) (abreviatura de "properties") y [`estado`](/docs/state-and-lifecycle.html) son objetos planos de JavaScript. Mientras ambos contienen información que influye en el resultado del render, son diferentes debido a una importante razón: `props` se pasa *al* componente (similar a los parámetros de una función) mientras que `estado` se administra *dentro* del componente (similar a las variables declaradas dentro de una función). -Aquí hay algunos buenos recursos para leer más sobre cuándo usar `props` vs `estado`: +Aquí hay algunos buenos recursos para leer más sobre cuándo usar `props` vs. `estado`: * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/) From 77abef7725d72ac35e5bc9e162a59f4ec0a53213 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:22:24 +0100 Subject: [PATCH 06/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index aab933a65..a06c31f91 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -12,7 +12,7 @@ category: FAQ ### ¿Cuál es la diferencia entre `state` y `props`? -[`props`](/docs/components-and-props.html) (abreviatura de "properties") y [`estado`](/docs/state-and-lifecycle.html) son objetos planos de JavaScript. Mientras ambos contienen información que influye en el resultado del render, son diferentes debido a una importante razón: `props` se pasa *al* componente (similar a los parámetros de una función) mientras que `estado` se administra *dentro* del componente (similar a las variables declaradas dentro de una función). +[`props`](/docs/components-and-props.html) (abreviatura de "*properties*") y [`state`](/docs/state-and-lifecycle.html) son objetos planos de JavaScript. Mientras ambos contienen información que influye en el resultado del render, son diferentes debido a una importante razón: `props` se pasa *al* componente (similar a los parámetros de una función) mientras que `state` se administra *dentro* del componente (similar a las variables declaradas dentro de una función). Aquí hay algunos buenos recursos para leer más sobre cuándo usar `props` vs. `estado`: * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) From a060c6c6e08d81509bd9e0e7607dfdf3a0ea2d60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:23:36 +0100 Subject: [PATCH 07/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index a06c31f91..b6dbe4c47 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -33,7 +33,7 @@ incrementCount() { } handleSomething() { - // Digamos que `this.state.count` inicia en 0. + // Digamos que `this.state.count` se inicia en 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); From 83bf7cc1ba39486c2b6801463f3583c664f9cd74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:23:51 +0100 Subject: [PATCH 08/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index b6dbe4c47..869fb82f6 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -37,7 +37,7 @@ handleSomething() { this.incrementCount(); this.incrementCount(); this.incrementCount(); - // Cuando React re-renderiza el componente, `this.state.count` será 1, pero tu esperabas 3. + // Cuando React rerenderiza el componente, `this.state.count` será 1, pero tu esperabas 3. // Esto es porque la función anterior `incrementCount()` lee de `this.state.count`, // pero React no actualiza `this.state.count` hasta que el componente se vuelve a renderizar. From 744276d86bb12b6964ac4d2dd39a267c4fbab58a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:24:01 +0100 Subject: [PATCH 09/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 869fb82f6..8783cecfb 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -43,7 +43,7 @@ handleSomething() { // pero React no actualiza `this.state.count` hasta que el componente se vuelve a renderizar. // Entonces `incrementCount()` termina leyendo `this.state.count` como 0 cada vez, y lo establece a 1. - // La solución se describe a continuación! + // ¡La solución se describe a continuación! } ``` From 6e18e0d7d3c73b6b28fc35134d3695d0d391906c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:24:14 +0100 Subject: [PATCH 10/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 8783cecfb..b78b4737a 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -88,7 +88,7 @@ Este es un detalle de implementación, así que evita confiar en él directament ### ¿Por qué React no actualiza `this.state` de forma sincrónica? -Como se explicó en la sección anterior, React intencionalmente "espera" hasta que todos los componentes llamen a `setState()` en sus controladores de eventos antes de comenzar a re-renderizar. Esto aumenta el rendimiento al evitar re-renderizados innecesarios. +Como se explicó en la sección anterior, React intencionalmente "espera" hasta que todos los componentes llamen a `setState()` en sus controladores de eventos antes de comenzar a rerenderizar. Esto aumenta el rendimiento al evitar rerenderizados innecesarios. Sin embargo, es posible que aún te estés preguntando por qué React no solo actualiza 'this.state' inmediatamente sin volver a renderizar. From 2d6047204f49fc153c54dcc4ba81cda8e26ac15b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:29:10 +0100 Subject: [PATCH 11/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index b78b4737a..0a047e13f 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -94,7 +94,7 @@ Sin embargo, es posible que aún te estés preguntando por qué React no solo ac Hay dos razones principales: -* Esto rompería la consistencia entre `props` y `estado`, causando problemas que son muy difíciles de depurar. +* Esto rompería la consistencia entre `props` y `state`, causando problemas que son muy difíciles de depurar. * Esto haría que algunas de las nuevas funcionalidades en las que estamos trabajando sean imposibles de implementar. Este [comentario de GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) profundiza en los ejemplos específicos. From f7a036110b4975922d0ca9b0b33cb3795fb87d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:29:22 +0100 Subject: [PATCH 12/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 0a047e13f..ec3dde2fd 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -103,4 +103,4 @@ Este [comentario de GitHub](https://github.com/facebook/react/issues/11527#issue [Tal vez.](https://redux.js.org/faq/general#when-should-i-use-redux) -Es una buena idea conocer primero React, antes de agregar librerías adicionales. Puedes construir aplicaciones bastante complejas usando solo React. +Es una buena idea conocer primero React, antes de agregar bibliotecas adicionales. Puedes construir aplicaciones bastante complejas usando solo React. From 781f5b8697b0a47cbc194f340d5d4b06325ad2b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 5 Feb 2019 07:29:33 +0100 Subject: [PATCH 13/13] Update content/docs/faq-state.md Co-Authored-By: GiuMagnani --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index ec3dde2fd..643b9108a 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -99,7 +99,7 @@ Hay dos razones principales: Este [comentario de GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) profundiza en los ejemplos específicos. -### ¿Debo usar una librería de manejo de estado como Redux o MobX? +### ¿Debo usar una biblioteca de manejo de estado como Redux o MobX? [Tal vez.](https://redux.js.org/faq/general#when-should-i-use-redux)