From 354752aa400a7be35ad8fdefefaa6d5375d425e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 29 Oct 2019 08:20:18 -0400 Subject: [PATCH 1/2] Translate "Concurrent UI Patterns" --- content/docs/concurrent-mode-patterns.md | 349 +++++++++++------------ content/docs/nav.yml | 2 +- 2 files changed, 174 insertions(+), 177 deletions(-) mode change 100644 => 100755 content/docs/concurrent-mode-patterns.md diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md old mode 100644 new mode 100755 index 21b7b2bff..2af19cac7 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -1,6 +1,6 @@ --- id: concurrent-mode-patterns -title: Concurrent UI Patterns (Experimental) +title: Patrones concurrentes en interfaces de usuario (Experimental) permalink: docs/concurrent-mode-patterns.html prev: concurrent-mode-suspense.html next: concurrent-mode-adoption.html @@ -12,9 +12,9 @@ next: concurrent-mode-adoption.html > >This documentation is aimed at early adopters and people who are curious. If you're new to React, don't worry about these features -- you don't need to learn them right now. -Usually, when we update the state, we expect to see changes on the screen immediately. This makes sense because we want to keep our app responsive to user input. However, there are cases where we might prefer to **defer an update from appearing on the screen**. +Usualmente, cuando actualizamos el estado, esperamos ver los cambios en la pantalla inmediatamente. Esto tiene sentido, porque queremos mantener nuestra aplicación responsiva a la entrada del usuario. Sin embargo, hay casos en que quisiéramos **postergar la aparición de una actualización en la pantalla**. -For example, if we switch from one page to another, and none of the code or data for the next screen has loaded yet, it might be frustrating to immediately see a blank page with a loading indicator. We might prefer to stay longer on the previous screen. Implementing this pattern has historically been difficult in React. Concurrent Mode offers a new set of tools to do that. +Por ejemplo, si cambiamos de una página a otra, y ni nuestro código o datos para la próxima pantalla se han cargado, puede ser frustrante ver inmediatamente una página en blanco con un indicador de carga. Podemos preferir permancer más tiempo en la pantalla anterior. La implementación de este patrón ha sido históricamente difícil con React. El Modo Concurrente ofrece un nuevo conjunto de herramientas para hacerlo. - [Transitions](#transitions) - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition) @@ -36,17 +36,17 @@ For example, if we switch from one page to another, and none of the code or data - [SuspenseList](#suspenselist) - [Next Steps](#next-steps) -## Transitions {#transitions} +## Transiciones {#transitions} -Let's revisit [this demo](https://codesandbox.io/s/infallible-feather-xjtbu) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). +Revisitemos [este demo](https://codesandbox.io/s/infallible-feather-xjtbu) de la página anterior acerca de [Suspense para la carga de datos](/docs/concurrent-mode-suspense.html). -When we click the "Next" button to switch the active profile, the existing page data immediately disappears, and we see the loading indicator for the whole page again. We can call this an "undesirable" loading state. **It would be nice if we could "skip" it and wait for some content to load before transitioning to the new screen.** +Cuando hacemos clic en el botón "Next" para cambiar el perfil activo, los datos de la página existente desaparecen inmediatamente y vemos el indicador de carga para todo la página nuevamente. Podemos llamar a esto un estado de carga "no deseable". **Sería bueno si pudiéramos "saltárnoslo" y esperar a que cargue algún contenido antes de hacer la transición a la nueva pantalla.** -React offers a new built-in `useTransition()` Hook to help with this. +React ofrece un nuevo Hook integrado llamado `useTransition()` para ayudar con esto. -We can use it in three steps. +Podemos usarlo en tres pasos. -First, we'll make sure that we're actually using Concurrent Mode. We'll talk more about [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) later, but for now it's sufficient to know that we need to use `ReactDOM.createRoot()` rather than `ReactDOM.render()` for this feature to work: +Primero, nos aseguraremos que que estamos realmente usando Modo Concurrente. Hablaremos más luego sobre como [adoptar el Modo Concurrente](/docs/concurrent-mode-adoption.html), pero por ahora es suficiente saber que necesitamos utilizar `ReactDOM.createRoot()` en lugar de `ReactDOM.render()` para que esto funcione: ```js const rootElement = document.getElementById("root"); @@ -54,13 +54,13 @@ const rootElement = document.getElementById("root"); ReactDOM.createRoot(rootElement).render(); ``` -Next, we'll add an import for the `useTransition` Hook from React: +A continucación, importaremos el Hook `useTransition` desde React: ```js import React, { useState, useTransition, Suspense } from "react"; ``` -Finally, we'll use it inside the `App` component: +Para finalizar, lo utilizaremos dentro del componente `App`: ```js{3-5} function App() { @@ -71,18 +71,18 @@ function App() { // ... ``` -**By itself, this code doesn't do anything yet.** We will need to use this Hook's return values to set up our state transition. There are two values returned from `useTransition`: +**Por sí solo, este código no hace nada aún.** Necesitaremos utilizar los valor de retorno de este Hook para establecer nuestra transición de estado. Hay dos valores retornados por `useTransition`: -* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer. -* `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment. +* `startTransition` es una función. La usaremos para decirle a React *qué* actualización estado queremos postergar. +* `isPending` es un booleano. Es React diciéndonos si esa transición está ocurriendo actualmente. -We will use them right below. +Los usaremos debajo. -Note we passed a configuration object to `useTransition`. Its `timeoutMs` property specifies **how long we're willing to wait for the transition to finish**. By passing `{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen". +Nota que pasamos un objeto de configuración para `useTransition`. Su propiedad `timeoutMs` especifica *cuánto tiempo estamos dispuestos a esperar para que la transición termine**. Al pasar `{timeoutMs: 3000}` estamos diciendo: "Si el próximo perfil toma más de 3 segundos en cargar, muestra este gran spinner, pero antes de ese tiempo está bien seguir mostrando la pantalla lanterior". -### Wrapping setState in a Transition {#wrapping-setstate-in-a-transition} +### Envolver setState en una transición {#wrapping-setstate-in-a-transition} -Our "Next" button click handler sets the state that switches the current profile in the state: +Nuestro manejador del evento click del botón "Next" establece el estado que cambia el perfil actual en el estado: ```js{4}