From d8fbbbf4a975e9da101d55cee9d60a657d6c3a1e Mon Sep 17 00:00:00 2001 From: Camilo Cortes <67564515+CamiloCortesM@users.noreply.github.com> Date: Tue, 4 Oct 2022 19:55:15 -0500 Subject: [PATCH 1/4] Update render-and-commit translated to Spanish --- beta/src/content/learn/render-and-commit.md | 116 ++++++++++---------- 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/beta/src/content/learn/render-and-commit.md b/beta/src/content/learn/render-and-commit.md index 8b4c85f67..21db636dc 100644 --- a/beta/src/content/learn/render-and-commit.md +++ b/beta/src/content/learn/render-and-commit.md @@ -1,44 +1,44 @@ --- -title: Render and Commit +title: Rrenderizar y confimar --- -Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Antes de que tus componentes se muestren en pantalla, deben ser renderizados por React. Entender los pasos de este proceso te ayudará a pensar en cómo se ejecuta tu código y a explicar su comportamiento. -* What rendering means in React -* When and why React renders a component -* The steps involved in displaying a component on screen -* Why rendering does not always produce a DOM update +* Qué significa el renderizado en React +* Cuándo y por qué React renderiza un componente +* Las etapas de la visualización de un componente en la pantalla +* Por qué el renderizado no siempre produce una actualización del DOM -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Imagina que tus componentes son cocineros en la cocina, montando sabrosos platos a partir de los ingredientes. En este escenario, React es el camarero que hace las peticiones de los clientes y les trae sus pedidos. Este proceso de solicitud y servicio de UI tiene tres pasos: -1. **Triggering** a render (delivering the guest's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Disparador** de un renderizado (entrega del pedido del cliente a la cocina) +2. **Renderización** del componente (preparación del pedido en la cocina) +3. **Confirmar** con el DOM (poner el pedido sobre la mesa) - - - + + + -## Step 1: Trigger a render {/*step-1-trigger-a-render*/} +## Paso 1: Disparar un render {/*step-1-trigger-a-render*/} -There are two reasons for a component to render: +Hay dos razones por las que un componente debe ser renderizado: -1. It's the component's **initial render.** -2. The component's (or one of its ancestors') **state has been updated.** +1. Es el **render inicial** del componente. +2. El estado del componente (o de uno de sus ancestros)**ha sido actualizado..** -### Initial render {/*initial-render*/} +### Render inicial {/*initial-render*/} -When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](https://beta.reactjs.org/apis/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component: +Cuando tu aplicación se inicie, necesitas activar el render inicial. Frameworks y sandboxes a veces ocultan este código, pero se hace llamando a [`createRoot`](https://beta.reactjs.org/apis/react-dom/client/createRoot) con el nodo DOM de destino, y luego llamar a su método `render` con su componente: @@ -55,7 +55,7 @@ export default function Image() { return ( 'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals ); } @@ -63,28 +63,28 @@ export default function Image() { -Try commenting out the `root.render()` call and see the component disappear! +Prueba a comentar la llamada `root.render()` y verás cómo desaparece el componente. -### Re-renders when state updates {/*re-renders-when-state-updates*/} +### Vuelve a rendirizar cuando se actualiza el estado {/*re-renders-when-state-updates*/} -Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/apis/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.) +Una vez que el componente ha sido renderizado inicialmente, puede desencadenar más renders actualizando su estado con la[función `set`.](/apis/react/useState#setstate) Al actualizar el estado de su componente, se pone en cola automáticamente un renderizado. (Puedes imaginarte esto como un cliente de un restaurante que pide té, postre y todo tipo de cosas después de poner su primer pedido, dependiendo del estado de su sed o hambre). - - - + + + -## Step 2: React renders your components {/*step-2-react-renders-your-components*/} +## Paso 2: React renderiza sus componentes {/*step-2-react-renders-your-components*/} -After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.** +Después de activar un render, React llama a tus componentes para averiguar qué mostrar en la pantalla.**El "Render" es React llamando a tus componentes.** -* **On initial render,** React will call the root component. -* **For subsequent renders,** React will call the function component whose state update triggered the render. +* **En el render inicial,** React llamará al componente raíz. +* **Para los siguientes renderizados,** React llamará al componente de la función cuya actualización de estado desencadenó el renderizado. -This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen. +Este proceso es recursivo: si el componente actualizado devuelve algún otro componente, React renderizará _ese_ componente a continuación, y si ese componente también devuelve algo, renderizará _ese_ componente a continuación, y así sucesivamente. El proceso continuará hasta que no haya más componentes anidados y React sepa exactamente qué debe mostrarse en pantalla. -In the following example, React will call `Gallery()` and `Image()` several times: +En el siguiente ejemplo, React llamará a `Gallery()` y a `Image()` varias veces: @@ -92,7 +92,7 @@ In the following example, React will call `Gallery()` and `Image()` several tim export default function Gallery() { return (
-

Inspiring Sculptures

+

Esculturas inspiradoras

@@ -104,7 +104,7 @@ function Image() { return ( 'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals ); } @@ -124,34 +124,35 @@ img { margin: 0 10px 10px 0; } -* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `
`, `

`, and three `` tags. -* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase. +* **Durante el render inicial,** React [creará los nodos del DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) para `
`, `

`, y tres etiquetas ``. +* **Durante un re-render,** React calculará cuáles de sus propiedades, si es que hay alguna, han cambiado desde el renderizado anterior. No hará nada con esa información hasta el siguiente paso, la fase de confirmación. -Rendering must always be a [pure calculation](/learn/keeping-components-pure): +El renderizado debe ser siempre un [cálculo puro](/learn/keeping-components-pure): -* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!) -* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.) +* **Mismo input, mismo output.** Dados los mismos inputs, un componente debería devolver siempre el mismo JSX. (Cuando alguien pide una ensalada con tomates, no debería recibir una ensalada con cebollas). +* **Se ocupa de sus propios asuntos.** No debería cambiar ningún objeto o variable que existiera antes de la renderización. (Una orden no debe cambiar la orden de nadie más). + +De lo contrario, puedes encontrarte con errores confusos y un comportamiento impredecible a medida que tu código base crece en complejidad. Cuando se desarrolla en "Modo estricto", React llama dos veces a la función de cada componente, lo que puede ayudar a aflorar los errores causados por funciones impuras. -Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions. - + -The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html#gatsby-focus-wrapper) section. **Don't optimize prematurely!** +El comportamiento por defecto de renderizar todos los componentes anidados dentro del componente actualizado no es óptimo para el rendimiento si el componente actualizado está muy alto en el árbol. Si se encuentra con un problema de rendimiento, hay varias formas de resolverlo descritas en la sección [Rendimiento].(https://reactjs.org/docs/optimizing-performance.html#gatsby-focus-wrapper) sección. **No optimices antes de tiempo.!** -## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/} +## Paso 3: React confirma los cambios en el DOM {/*step-3-react-commits-changes-to-the-dom*/} -After rendering (calling) your components, React will modify the DOM. +Después de renderizar (llamar) sus componentes, React modificará el DOM. -* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. -* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output. +* **Para el render inicial,** React utilizará la función [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API para poner en pantalla todos los nodos DOM que ha creado. +* **Para las re-renders,** React aplicará las operaciones mínimas necesarias (¡calculadas durante la renderización!) para hacer que el DOM coincida con la última salida de la renderización. -**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the ``, updating its `value`, but the text doesn't disappear when the component re-renders: +**React sólo cambia los nodos del DOM si hay una diferencia entre los renders.** Por ejemplo, este es un componente que vuelve a renderizar con diferentes accesorios pasados desde su padre cada segundo. Fíjate en que puedes añadir algún texto en el ``, actualizando su `valor`, pero el texto no desaparece cuando el componente se vuelve a renderizar: @@ -191,21 +192,20 @@ export default function App() { -This works because during this last step, React only updates the content of `

` with the new `time`. It sees that the `` appears in the JSX in the same place as last time, so React doesn't touch the ``—or its `value`! -## Epilogue: Browser paint {/*epilogue-browser-paint*/} +Esto funciona porque durante este último paso, React sólo actualiza el contenido de `

` con el nuevo `time`. Ve que el `` aparece en el JSX en el mismo lugar que la última vez, así que React no toca el ``-¡ni su `valor`! +## Epílogo: La pintura del navegador {/*epilogue-browser-paint*/} -After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion in the rest of these docs. +Después de que el renderizado haya terminado y React haya actualizado el DOM, el navegador volverá a pintar la pantalla. Aunque este proceso se conoce como "renderizado del navegador", nos referiremos a él como "pintado" para evitar confusiones en el resto de esta documentación. - + -* Any screen update in a React app happens in three steps: - 1. Trigger - 2. Render - 3. Commit -* You can use Strict Mode to find mistakes in your components -* React does not touch the DOM if the rendering result is the same as last time +* Cualquier actualización de pantalla en una aplicación React ocurre en tres pasos: + 1. Disparar + 2. Renderizar + 3. Confirmar +* Puede utilizar el modo estricto para encontrar errores en sus componentes +* React no toca el DOM si el resultado del renderizado es el mismo que la última vez - From 56bd274678bac8e010b7b2feb14312ab437283dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Fri, 7 Oct 2022 18:20:38 -0400 Subject: [PATCH 2/4] fix line number --- beta/src/content/learn/render-and-commit.md | 1 - 1 file changed, 1 deletion(-) diff --git a/beta/src/content/learn/render-and-commit.md b/beta/src/content/learn/render-and-commit.md index 21db636dc..cfc79b0b3 100644 --- a/beta/src/content/learn/render-and-commit.md +++ b/beta/src/content/learn/render-and-commit.md @@ -136,7 +136,6 @@ El renderizado debe ser siempre un [cálculo puro](/learn/keeping-components-pur De lo contrario, puedes encontrarte con errores confusos y un comportamiento impredecible a medida que tu código base crece en complejidad. Cuando se desarrolla en "Modo estricto", React llama dos veces a la función de cada componente, lo que puede ayudar a aflorar los errores causados por funciones impuras. - From 90956aaca17521d70aacbb997e06877f1d13b67e Mon Sep 17 00:00:00 2001 From: Camilo Cortes <67564515+CamiloCortesM@users.noreply.github.com> Date: Fri, 7 Oct 2022 22:54:31 -0500 Subject: [PATCH 3/4] fix words --- beta/src/content/learn/render-and-commit.md | 36 ++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/beta/src/content/learn/render-and-commit.md b/beta/src/content/learn/render-and-commit.md index cfc79b0b3..935c9bc68 100644 --- a/beta/src/content/learn/render-and-commit.md +++ b/beta/src/content/learn/render-and-commit.md @@ -1,5 +1,5 @@ --- -title: Rrenderizar y confimar +title: Renderizado y confimación --- @@ -21,22 +21,22 @@ Imagina que tus componentes son cocineros en la cocina, montando sabrosos platos 1. **Disparador** de un renderizado (entrega del pedido del cliente a la cocina) 2. **Renderización** del componente (preparación del pedido en la cocina) -3. **Confirmar** con el DOM (poner el pedido sobre la mesa) +3. **Confirmación** con el DOM (poner el pedido sobre la mesa) - - + + -## Paso 1: Disparar un render {/*step-1-trigger-a-render*/} +## Paso 1: Disparar un renderizado {/*step-1-trigger-a-render*/} Hay dos razones por las que un componente debe ser renderizado: -1. Es el **render inicial** del componente. +1. Es el **renderizado inicial** del componente. 2. El estado del componente (o de uno de sus ancestros)**ha sido actualizado..** -### Render inicial {/*initial-render*/} +### Renderizado inicial {/*initial-render*/} Cuando tu aplicación se inicie, necesitas activar el render inicial. Frameworks y sandboxes a veces ocultan este código, pero se hace llamando a [`createRoot`](https://beta.reactjs.org/apis/react-dom/client/createRoot) con el nodo DOM de destino, y luego llamar a su método `render` con su componente: @@ -72,14 +72,14 @@ Una vez que el componente ha sido renderizado inicialmente, puede desencadenar m - + ## Paso 2: React renderiza sus componentes {/*step-2-react-renders-your-components*/} -Después de activar un render, React llama a tus componentes para averiguar qué mostrar en la pantalla.**El "Render" es React llamando a tus componentes.** +Después de activar un renderizado, React llama a tus componentes para averiguar qué mostrar en la pantalla.**El "Renderizado" es React llamando a tus componentes.** -* **En el render inicial,** React llamará al componente raíz. +* **En el renderizado inicial,** React llamará al componente raíz. * **Para los siguientes renderizados,** React llamará al componente de la función cuya actualización de estado desencadenó el renderizado. Este proceso es recursivo: si el componente actualizado devuelve algún otro componente, React renderizará _ese_ componente a continuación, y si ese componente también devuelve algo, renderizará _ese_ componente a continuación, y así sucesivamente. El proceso continuará hasta que no haya más componentes anidados y React sepa exactamente qué debe mostrarse en pantalla. @@ -124,8 +124,8 @@ img { margin: 0 10px 10px 0; } -* **Durante el render inicial,** React [creará los nodos del DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) para `
`, `

`, y tres etiquetas ``. -* **Durante un re-render,** React calculará cuáles de sus propiedades, si es que hay alguna, han cambiado desde el renderizado anterior. No hará nada con esa información hasta el siguiente paso, la fase de confirmación. +* **Durante el renderizado inicial,** React [creará los nodos del DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) para `
`, `

`, y tres etiquetas ``. +* **Durante un re-renderizado,** React calculará cuáles de sus propiedades, si es que hay alguna, han cambiado desde el renderizado anterior. No hará nada con esa información hasta el siguiente paso, la fase de confirmación. @@ -148,10 +148,10 @@ El comportamiento por defecto de renderizar todos los componentes anidados dentr Después de renderizar (llamar) sus componentes, React modificará el DOM. -* **Para el render inicial,** React utilizará la función [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API para poner en pantalla todos los nodos DOM que ha creado. -* **Para las re-renders,** React aplicará las operaciones mínimas necesarias (¡calculadas durante la renderización!) para hacer que el DOM coincida con la última salida de la renderización. +* **Para el renderizado inicial,** React utilizará la función [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API para poner en pantalla todos los nodos DOM que ha creado. +* **Para las re-renderizados,** React aplicará las operaciones mínimas necesarias (¡calculadas durante la renderización!) para hacer que el DOM coincida con la última salida de la renderización. -**React sólo cambia los nodos del DOM si hay una diferencia entre los renders.** Por ejemplo, este es un componente que vuelve a renderizar con diferentes accesorios pasados desde su padre cada segundo. Fíjate en que puedes añadir algún texto en el ``, actualizando su `valor`, pero el texto no desaparece cuando el componente se vuelve a renderizar: +**React sólo cambia los nodos del DOM si hay una diferencia entre los renderizados.** Por ejemplo, este es un componente que vuelve a renderizar con diferentes accesorios pasados desde su padre cada segundo. Fíjate en que puedes añadir algún texto en el ``, actualizando su `valor`, pero el texto no desaparece cuando el componente se vuelve a renderizar: @@ -201,9 +201,9 @@ Después de que el renderizado haya terminado y React haya actualizado el DOM, e * Cualquier actualización de pantalla en una aplicación React ocurre en tres pasos: - 1. Disparar - 2. Renderizar - 3. Confirmar + 1. Disparador + 2. Renderización + 3. Confirmación * Puede utilizar el modo estricto para encontrar errores en sus componentes * React no toca el DOM si el resultado del renderizado es el mismo que la última vez From bb774b5e8c9b1354f63476d003d53d2eb124b12d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Mon, 10 Oct 2022 19:41:43 -0400 Subject: [PATCH 4/4] fix typos and apply style guide --- beta/src/content/learn/render-and-commit.md | 63 +++++++++++---------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/beta/src/content/learn/render-and-commit.md b/beta/src/content/learn/render-and-commit.md index 935c9bc68..a16740b13 100644 --- a/beta/src/content/learn/render-and-commit.md +++ b/beta/src/content/learn/render-and-commit.md @@ -1,10 +1,10 @@ --- -title: Renderizado y confimación +title: Renderizado y confirmación --- -Antes de que tus componentes se muestren en pantalla, deben ser renderizados por React. Entender los pasos de este proceso te ayudará a pensar en cómo se ejecuta tu código y a explicar su comportamiento. +Para que tus componentes se muestren en pantalla, antes deben ser renderizados por React. Entender los pasos de este proceso te ayudará a pensar en cómo se ejecuta tu código y a explicar su comportamiento. @@ -19,26 +19,26 @@ Antes de que tus componentes se muestren en pantalla, deben ser renderizados por Imagina que tus componentes son cocineros en la cocina, montando sabrosos platos a partir de los ingredientes. En este escenario, React es el camarero que hace las peticiones de los clientes y les trae sus pedidos. Este proceso de solicitud y servicio de UI tiene tres pasos: -1. **Disparador** de un renderizado (entrega del pedido del cliente a la cocina) -2. **Renderización** del componente (preparación del pedido en la cocina) +1. **Desencadenamiento** de un renderizado (entrega del pedido del cliente a la cocina) +2. **Renderizado** del componente (preparación del pedido en la cocina) 3. **Confirmación** con el DOM (poner el pedido sobre la mesa) - - + + -## Paso 1: Disparar un renderizado {/*step-1-trigger-a-render*/} +## Paso 1: Desencadenar un renderizado {/*step-1-trigger-a-render*/} Hay dos razones por las que un componente debe ser renderizado: 1. Es el **renderizado inicial** del componente. -2. El estado del componente (o de uno de sus ancestros)**ha sido actualizado..** +2. El estado del componente (o de uno de sus ancestros) **ha sido actualizado.** ### Renderizado inicial {/*initial-render*/} -Cuando tu aplicación se inicie, necesitas activar el render inicial. Frameworks y sandboxes a veces ocultan este código, pero se hace llamando a [`createRoot`](https://beta.reactjs.org/apis/react-dom/client/createRoot) con el nodo DOM de destino, y luego llamar a su método `render` con su componente: +Cuando tu aplicación se inicia, necesitas activar el renderizado inicial. Frameworks y sandboxes a veces ocultan este código, pero se hace con una llamada a [`createRoot`](/apis/react-dom/client/createRoot) con el nodo DOM de destino, y luego con otra llamada a su método `render` con tu componente: @@ -63,24 +63,24 @@ export default function Image() { -Prueba a comentar la llamada `root.render()` y verás cómo desaparece el componente. +Prueba a comentar la llamada `root.render()` ¡y verás cómo desaparece el componente! -### Vuelve a rendirizar cuando se actualiza el estado {/*re-renders-when-state-updates*/} +### Rerenderizados cuando se actualiza el estado {/*re-renders-when-state-updates*/} -Una vez que el componente ha sido renderizado inicialmente, puede desencadenar más renders actualizando su estado con la[función `set`.](/apis/react/useState#setstate) Al actualizar el estado de su componente, se pone en cola automáticamente un renderizado. (Puedes imaginarte esto como un cliente de un restaurante que pide té, postre y todo tipo de cosas después de poner su primer pedido, dependiendo del estado de su sed o hambre). +Una vez que el componente ha sido renderizado inicialmente, puede desencadenar más renderizados actualizando su estado con la [función `set`.](/apis/react/useState#setstate) Al actualizar el estado de tu componente, se pone en cola automáticamente un renderizado. (Puedes imaginarte esto como un cliente de un restaurante que pide té, postre y todo tipo de cosas después de poner su primer pedido, dependiendo del estado de su sed o hambre). - - - + + + -## Paso 2: React renderiza sus componentes {/*step-2-react-renders-your-components*/} +## Paso 2: React renderiza tus componentes {/*step-2-react-renders-your-components*/} -Después de activar un renderizado, React llama a tus componentes para averiguar qué mostrar en la pantalla.**El "Renderizado" es React llamando a tus componentes.** +Después de activar un renderizado, React llama a tus componentes para averiguar qué mostrar en la pantalla. **Un "renderizado" consiste en que React haga una llamada a tus componentes.** * **En el renderizado inicial,** React llamará al componente raíz. -* **Para los siguientes renderizados,** React llamará al componente de la función cuya actualización de estado desencadenó el renderizado. +* **Para los siguientes renderizados,** React llamará al componente de función cuya actualización de estado desencadenó el renderizado. Este proceso es recursivo: si el componente actualizado devuelve algún otro componente, React renderizará _ese_ componente a continuación, y si ese componente también devuelve algo, renderizará _ese_ componente a continuación, y así sucesivamente. El proceso continuará hasta que no haya más componentes anidados y React sepa exactamente qué debe mostrarse en pantalla. @@ -125,33 +125,33 @@ img { margin: 0 10px 10px 0; } * **Durante el renderizado inicial,** React [creará los nodos del DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) para `
`, `

`, y tres etiquetas ``. -* **Durante un re-renderizado,** React calculará cuáles de sus propiedades, si es que hay alguna, han cambiado desde el renderizado anterior. No hará nada con esa información hasta el siguiente paso, la fase de confirmación. +* **Durante un rerenderizado,** React calculará cuáles de sus propiedades, si es que hay alguna, han cambiado desde el renderizado anterior. No hará nada con esa información hasta el siguiente paso, la fase de confirmación. El renderizado debe ser siempre un [cálculo puro](/learn/keeping-components-pure): -* **Mismo input, mismo output.** Dados los mismos inputs, un componente debería devolver siempre el mismo JSX. (Cuando alguien pide una ensalada con tomates, no debería recibir una ensalada con cebollas). -* **Se ocupa de sus propios asuntos.** No debería cambiar ningún objeto o variable que existiera antes de la renderización. (Una orden no debe cambiar la orden de nadie más). +* **Misma entrada, misma salida.** Dadas las mismas entradas, un componente debería devolver siempre el mismo JSX. (Cuando alguien pide una ensalada con tomates, no debería recibir una ensalada con cebollas). +* **Se ocupa de sus propios asuntos.** No debería cambiar ningún objeto o variable que existiera antes del renderizado. (Una orden no debe cambiar la orden de nadie más). -De lo contrario, puedes encontrarte con errores confusos y un comportamiento impredecible a medida que tu código base crece en complejidad. Cuando se desarrolla en "Modo estricto", React llama dos veces a la función de cada componente, lo que puede ayudar a aflorar los errores causados por funciones impuras. +De lo contrario, puedes encontrarte con errores confusos y un comportamiento impredecible a medida que tu base de código crece en complejidad. Cuando se desarrolla en "Modo estricto", React llama dos veces a la función de cada componente, lo que puede ayudar a aflorar los errores causados por funciones impuras. -El comportamiento por defecto de renderizar todos los componentes anidados dentro del componente actualizado no es óptimo para el rendimiento si el componente actualizado está muy alto en el árbol. Si se encuentra con un problema de rendimiento, hay varias formas de resolverlo descritas en la sección [Rendimiento].(https://reactjs.org/docs/optimizing-performance.html#gatsby-focus-wrapper) sección. **No optimices antes de tiempo.!** +El comportamiento por defecto de renderizar todos los componentes anidados dentro del componente actualizado no es óptimo para el rendimiento si el componente actualizado está muy alto en el árbol. Si se encuentra con un problema de rendimiento, hay varias formas de resolverlo descritas en la sección [Rendimiento].(https://es.reactjs.org/docs/optimizing-performance.html#gatsby-focus-wrapper) sección. **No optimices antes de tiempo.!** ## Paso 3: React confirma los cambios en el DOM {/*step-3-react-commits-changes-to-the-dom*/} -Después de renderizar (llamar) sus componentes, React modificará el DOM. +Después de renderizar (llamar) tus componentes, React modificará el DOM. -* **Para el renderizado inicial,** React utilizará la función [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API para poner en pantalla todos los nodos DOM que ha creado. -* **Para las re-renderizados,** React aplicará las operaciones mínimas necesarias (¡calculadas durante la renderización!) para hacer que el DOM coincida con la última salida de la renderización. +* **Para el renderizado inicial,** React utilizará la API del DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) para poner en pantalla todos los nodos del DOM que ha creado. +* **Para los rerenderizados,** React aplicará las operaciones mínimas necesarias (¡calculadas durante el renderizado!) para hacer que el DOM coincida con la última salida del renderizado. -**React sólo cambia los nodos del DOM si hay una diferencia entre los renderizados.** Por ejemplo, este es un componente que vuelve a renderizar con diferentes accesorios pasados desde su padre cada segundo. Fíjate en que puedes añadir algún texto en el ``, actualizando su `valor`, pero el texto no desaparece cuando el componente se vuelve a renderizar: +**React sólo cambia los nodos del DOM si hay una diferencia entre los renderizados.** Por ejemplo, este es un componente que se vuelve a renderizar con diferentes props pasadas desde su padre cada segundo. Fíjate en que puedes añadir algún texto en el ``, actualizando su `valor`, pero el texto no desaparece cuando el componente se vuelve a renderizar: @@ -196,15 +196,16 @@ Esto funciona porque durante este último paso, React sólo actualiza el conteni Después de que el renderizado haya terminado y React haya actualizado el DOM, el navegador volverá a pintar la pantalla. Aunque este proceso se conoce como "renderizado del navegador", nos referiremos a él como "pintado" para evitar confusiones en el resto de esta documentación. - + * Cualquier actualización de pantalla en una aplicación React ocurre en tres pasos: - 1. Disparador - 2. Renderización + 1. Desencadenamiento + 2. Renderizado 3. Confirmación -* Puede utilizar el modo estricto para encontrar errores en sus componentes +* Puedes utilizar el modo estricto para encontrar errores en tus componentes * React no toca el DOM si el resultado del renderizado es el mismo que la última vez +