From acd197959144fd796e254613f5bd08f28e3c9f7a Mon Sep 17 00:00:00 2001 From: lilymartinez Date: Tue, 8 Aug 2023 21:44:33 -0600 Subject: [PATCH 1/3] Translation draft --- ...-what-we-have-been-working-on-june-2022.md | 67 +++++++++---------- 1 file changed, 33 insertions(+), 34 deletions(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index a68961484..4a5718b0e 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -1,79 +1,78 @@ --- -title: "React Labs: What We've Been Working On – June 2022" +title: "React Labs: En qué hemos estado trabajando – junio 2022" --- -June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Xuan Huang](https://twitter.com/Huxpro) +15 de junio de 2022 por [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), y [Xuan Huang](https://twitter.com/Huxpro) --- -[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring. +[React 18](https://reactjs.org/blog/2022/03/29/react-v18) estuvo por años en desarrollo y con él llegaron lecciones valiosas para el equipo de React. Su lanzamiento fue el resultado de muchos años de investigación y exploración de diversos caminos. Algunos de esos caminos fueron exitosos; muchos otros fueron callejones sin salida que nos llevaron a nuevas ideas. Una lección que hemos aprendido es que resulta frustrante para la comunidad esperar nuevas funcionalidades sin tener información sobre las rutas que estamos explorando. --- -We typically have a number of projects being worked on at any time, ranging from the more experimental to the clearly defined. Looking ahead, we’d like to start regularly sharing more about what we’ve been working on with the community across these projects. +Normalmente tenemos varios proyectos en marcha en todo momento, que van desde los más experimentales hasta los que estan claramente definidos. En un futuro nos gustaría comenzar a compartir regularmente con la comunidad más información sobre en qué hemos estado trabajando en relación a estos proyectos. -To set expectations, this is not a roadmap with clear timelines. Many of these projects are under active research and are difficult to put concrete ship dates on. They may possibly never even ship in their current iteration depending on what we learn. Instead, we want to share with you the problem spaces we’re actively thinking about, and what we’ve learned so far. +Para establecer expectativas, esta no es una ruta con plazos definidos. Muchos de estos proyectos se encuentran en investigación activa y es difícil establecer fechas de lanzamiento concretas. Dependiendo de lo que aprendamos, es posible que incluso algunos de ellos nunca se lancen en su iteración actual. En cambio, queremos compartir contigo los espacios de problemas que estan siendo analizados activamente y lo que hemos aprendido hasta ahora. ## Server Components {/*server-components*/} -We announced an [experimental demo of React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback. +En diciembre de 2020 anunciamos un [demo experimental de los React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components) (RSC). Desde entonces, hemos estado finalizando sus dependencias en React 18 y trabajando en cambios inspirados por la retroalimentacion recibida durante las pruebas. -In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +En particular, estamos dejando la idea de tener bibliotecas de I/O bifurcadas (por ejemplo, react-fetch) y, en su lugar, adoptando un modelo de async/await para una mejor compatibilidad. Esto no bloquea técnicamente el lanzamiento de los RSC porque también se puede hacer uso de enrutadores para la recuperación de datos. Otro cambio es que también nos estamos alejando del enfoque de la extensión de archivo en favor de [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable. +Estamos trabajando en colaboración con Vercel y Shopify para unificar el soporte del bundler para la semántica compartida tanto en Webpack como en Vite. Antes del lanzamiento, queremos asegurarnos de que la semántica de los RSCs sea la misma en todo el ecosistema de React. Este es el principal obstáculo para alcanzar estabilidad. -## Asset Loading {/*asset-loading*/} +## Carga de recursos {/*asset-loading*/} -Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more. -We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments. +Actualmente, los recursos como scripts, estilos externos, fuentes e imágenes generalmente se precargan y cargan utilizando sistemas externos. Esto puede dificultar la coordinación en nuevos entornos como la transmisión de datos, los componentes del servidor y otros. Estamos evaluando la posibilidad de agregar APIs para precargar y cargar recursos externos sin duplicaciones a través de APIs de React que funcionen en todos los entornos de React. -We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts. +También estamos considerando que sean compatibles con Suspense, de modo que puedas tener imágenes, CSS y fuentes que bloqueen la visualización hasta que se carguen, pero que no bloqueen la transmisión y el renderizado simultáneo. Esto puede ayudar a evitar el [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) cuando los elementos visuales aparecen y provocan cambios en la presentación. -## Static Server Rendering Optimizations {/*static-server-rendering-optimizations*/} +## Optimizaciones del renderizado stático de servidor {/*static-server-rendering-optimizations*/} -Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great ways to get performance for cacheable pages, but we think we can add features to improve performance of dynamic Server Side Rendering (SSR) – especially when most but not all of the content is cacheable. We're exploring ways to optimize server rendering utilizing compilation and static passes. +La Generación de Sitios Estáticos (SSG) y la Regeneración Estática Incremental (ISR) son excelentes formas de conseguir rendimiento para páginas que se pueden almacenar en caché, pero creemos que podemos agregar funcionalidades para mejorar el rendimiento del Renderizado del Lado del Servidor (SSR) dinámico, especialmente cuando la mayoría pero no todo el contenido se puede almacenar en caché. Estamos explorando formas de optimizar el renderizado en el servidor utilizando compilación y pases estáticos. -## React Optimizing Compiler {/*react-compiler*/} +## Compilador de optimización de React {/*react-compiler*/} -We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model. +Presentamos una [vista previa anticipada](https://www.youtube.com/watch?v=lGEMwh32soc) de React Forget en React Conf 2021. Es un compilador que genera automáticamente llamadas equivalentes a `useMemo` y `useCallback` para minimizar el costo de volver a renderizar, al mismo tiempo que conserva el modelo de programación de React. -Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks. +Recientemente, terminamos una reescritura del compilador para hacerlo más confiable y eficiente. Esta nueva arquitectura nos permite analizar y memorizar patrones más complejos, como el uso de [mutaciones locales](/learn/keeping-components-pure#local-mutation-your-components-little-secret), y abre muchas nuevas oportunidades de optimización en tiempo de compilación más allá de simplemente igualar los hooks de memoización. -We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released. +También estamos trabajando en un espacio de experimentación para explorar muchos aspectos del compilador. Si bien el objetivo del espacio de experimentación es facilitar el desarrollo del compilador, creemos que también facilitará probarlo y desarrollar percepción sobre lo que hace el compilador. Revela varias ideas sobre cómo funciona internamente y muestra en tiempo real las salidas del compilador mientras escribes. Esto se incluirá junto con el compilador cuando se lance. ## Offscreen {/*offscreen*/} -Today, if you want to hide and show a component, you have two options. One is to add or remove it from the tree completely. The problem with this approach is that the state of your UI is lost each time you unmount, including state stored in the DOM, like scroll position. +Hoy en día, si deseas ocultar y mostrar un componente, tienes dos opciones. Una es agregarlo o quitarlo completamente del árbol. El problema con este enfoque es que el estado de tu interfaz de usuario se pierde cada vez que desmontas el componente, incluido el estado almacenado en el DOM, como la posición de desplazamiento (scroll position). -The other option is to keep the component mounted and toggle the appearance visually using CSS. This preserves the state of your UI, but it comes at a performance cost, because React must keep rendering the hidden component and all of its children whenever it receives new updates. +La otra opción es mantener el componente montado y cambiar su visibilidad usando CSS. Esto preserva el estado de tu interfaz de usuario, pero conlleva un costo en términos de rendimiento, ya que React debe seguir renderizando el componente oculto y todos sus elementos hijos cada vez que recibe nuevas actualizaciones. -Offscreen introduces a third option: hide the UI visually, but deprioritize its content. The idea is similar in spirit to the `content-visibility` CSS property: when content is hidden, it doesn't need to stay in sync with the rest of the UI. React can defer the rendering work until the rest of the app is idle, or until the content becomes visible again. +Offscreen introduce una tercera opción: ocultar la interfaz de usuario visualmente, pero darle menor prioridad a su contenido. La idea es similar en esencia a la propiedad CSS `content-visibility`: cuando el contenido está oculto, no es necesario que permanezca sincronizado con el resto de la UI. React puede posponer el trabajo de renderizado hasta que el resto de la aplicación esté inactiva o hasta que el contenido vuelva a ser visible. -Offscreen is a low level capability that unlocks high level features. Similar to React's other concurrent features like `startTransition`, in most cases you won't interact with the Offscreen API directly, but instead via an opinionated framework to implement patterns like: +Offscreen es una función de bajo nivel que desbloquea funciones de alto nivel. Similar a otras características concurrentes de React, como `startTransition`, en la mayoría de los casos no interactuarás directamente con la API de Offscreen, sino más bien a través de un framework rígido para implementar patrones como: -* **Instant transitions.** Some routing frameworks already prefetch data to speed up subsequent navigations, like when hovering over a link. With Offscreen, they'll also be able to prerender the next screen in the background. -* **Reusable state.** Similarly, when navigating between routes or tabs, you can use Offscreen to preserve the state of the previous screen so you can switch back and pick up where you left off. -* **Virtualized list rendering.** When displaying large lists of items, virtualized list frameworks will prerender more rows than are currently visible. You can use Offscreen to prerender the hidden rows at a lower priority than the visible items in the list. -* **Backgrounded content.** We're also exploring a related feature for deprioritizing content in the background without hiding it, like when displaying a modal overlay. +* **Instant transitions.** Algunos frameworks de enrutamiento ya precargan datos para acelerar las navegaciones subsecuentes, como cuando se pasa el cursor sobre un enlace. Con Offscreen, también podrán prerrenderizar la próxima pantalla en segundo plano. +* **Reusable state.** De manera similar, al navegar entre rutas o pestañas, puedes utilizar Offscreen para preservar el estado de la pantalla anterior, de modo que puedas regresar y retomar desde donde lo dejaste. +* **Virtualized list rendering.** Cuando se muestran grandes listas de elementos, los frameworks de listas virtualizadas prerrenderizarán más filas de las que están actualmente visibles. Puedes utilizar Offscreen para prerrenderizar las filas ocultas con una prioridad menor que los elementos visibles en la lista. +* **Backgrounded content.** También estamos explorando una característica relacionada para dar menor prioridad al contenido en segundo plano sin ocultarlo, por ejemplo, al mostrar un modal superpuesto. ## Transition Tracing {/*transition-tracing*/} -Currently, React has two profiling tools. The [original Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code. +Actualmente, React cuenta con dos herramientas de perfilado. El [original Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) muestra una descripción general de todos los commits en una sesión de perfilado. Para cada commit, también muestra todos los componentes que se han renderizado y el tiempo que les llevó renderizarse. También tenemos una versión beta de un [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) presentado en React 18, que muestra cuándo los componentes programan actualizaciones y cuándo React trabaja en estas actualizaciones. Ambos perfiladores ayudan a los desarrolladores a identificar problemas de rendimiento en su código. -We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it. +Nos hemos dado cuenta que a los desarrolladores no les resulta muy útil conocer acerca de commits individuales lentos o componentes fuera de contexto. Es más util saber qué es lo que realmente provoca que los commits sean lentos. Y que los desarrolladores desean poder rastrear interacciones específicas (por ejemplo, un clic en un botón, una carga inicial o una navegación de página) para detectar regresiones de rendimiento y comprender por qué una interacción fue lenta y cómo solucionarla. -We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/facebook/react/pull/20037) because of these issues. +Anteriormente intentamos resolver este problema creando una [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), pero tenía algunos fallos de diseño fundamentales que reducían la precisión para rastrear por qué una interacción era lenta y a veces resultaban en interacciones que nunca finalizaban. Terminamos [removing this API](https://github.com/facebook/react/pull/20037) debido a estos problemas. -We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via `startTransition`) that solves these problems. +Estamos trabajando en una nueva versión de la API de Rastreo de Interacciones (llamada provisionalmente Transition Tracing debido a que se inicia mediante `startTransition`) que resuelve estos problemas. -## New React Docs {/*new-react-docs*/} +## Nueva documentacion de React {/*new-react-docs*/} -Last year, we announced the beta version of the new React documentation website ([later shipped as react.dev](/blog/2023/03/16/introducing-react-dev)) of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation. +El año pasado, anunciamos la versión beta del nuevo sitio web de documentación de React ([later shipped as react.dev](/blog/2023/03/16/introducing-react-dev)). Los nuevos materiales de aprendizaje enseñan primero los Hooks y cuentan con nuevos diagramas, ilustraciones, así como muchos ejemplos y desafíos interactivos. Pausamos ese trabajo para centrarnos en el lanzamiento de React 18, pero ahora que React 18 ya está disponible, estamos trabajando activamente para finalizar y lanzar la nueva documentación. -We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/reactjs.org/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation. +Actualmente estamos redactando una sección detallada sobre los efectos, ya que hemos escuchado que es uno de los temas más desafiantes tanto para usuarios nuevos como experimentados de React. [Synchronizing with Effects](/learn/synchronizing-with-effects) es la primera página publicada en la serie, y habrá más en las próximas semanas. Cuando comenzamos a escribir una sección detallada sobre los efectos, nos dimos cuenta de que muchos patrones comunes de efectos pueden simplificarse al agregar un nuevo primitivo a React. Hemos compartido algunas ideas iniciales sobre esto en el [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Actualmente se encuentra en una etapa inicial de investigación y aún estamos iterando sobre la idea. Agradecemos los comentarios de la comunidad hasta ahora sobre el RFC, así como la [feedback](https://github.com/reactjs/reactjs.org/issues/3308) y contribuciones a la reescritura en curso de la documentación. Queremos agradecer especialmente a [Harish Kumar](https://github.com/harish-sethuraman) por enviar y revisar muchas mejoras en la implementación del nuevo sitio web. -*Thanks to [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this blog post!* +*¡Gracias a [Sophie Alpert](https://twitter.com/sophiebits) por revisar esta publicación en el blog!* From 6af24f4f2ac33b5a60345629ebda5a9bad2da291 Mon Sep 17 00:00:00 2001 From: lilymartinez Date: Tue, 8 Aug 2023 22:22:24 -0600 Subject: [PATCH 2/3] QA --- ...-what-we-have-been-working-on-june-2022.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 4a5718b0e..405dac8ac 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -14,13 +14,13 @@ title: "React Labs: En qué hemos estado trabajando – junio 2022" --- -Normalmente tenemos varios proyectos en marcha en todo momento, que van desde los más experimentales hasta los que estan claramente definidos. En un futuro nos gustaría comenzar a compartir regularmente con la comunidad más información sobre en qué hemos estado trabajando en relación a estos proyectos. +Normalmente tenemos varios proyectos en marcha en todo momento, que van desde los más experimentales hasta los que están claramente definidos. En un futuro nos gustaría comenzar a compartir regularmente con la comunidad más información sobre en qué hemos estado trabajando en relación a estos proyectos. -Para establecer expectativas, esta no es una ruta con plazos definidos. Muchos de estos proyectos se encuentran en investigación activa y es difícil establecer fechas de lanzamiento concretas. Dependiendo de lo que aprendamos, es posible que incluso algunos de ellos nunca se lancen en su iteración actual. En cambio, queremos compartir contigo los espacios de problemas que estan siendo analizados activamente y lo que hemos aprendido hasta ahora. +Para establecer expectativas, esta no es una ruta con plazos definidos. Muchos de estos proyectos se encuentran en investigación activa y es difícil establecer fechas de lanzamiento concretas. Dependiendo de lo que aprendamos, es posible que incluso algunos de ellos nunca se lancen en su iteración actual. En cambio, queremos compartir contigo los espacios de problemas que están siendo analizados activamente y lo que hemos aprendido hasta ahora. ## Server Components {/*server-components*/} -En diciembre de 2020 anunciamos un [demo experimental de los React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components) (RSC). Desde entonces, hemos estado finalizando sus dependencias en React 18 y trabajando en cambios inspirados por la retroalimentacion recibida durante las pruebas. +En diciembre de 2020 anunciamos un [experimental demo of React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components) (RSC). Desde entonces, hemos estado finalizando sus dependencias en React 18 y trabajando en cambios inspirados por la retroalimentación recibida durante las pruebas. En particular, estamos dejando la idea de tener bibliotecas de I/O bifurcadas (por ejemplo, react-fetch) y, en su lugar, adoptando un modelo de async/await para una mejor compatibilidad. Esto no bloquea técnicamente el lanzamiento de los RSC porque también se puede hacer uso de enrutadores para la recuperación de datos. Otro cambio es que también nos estamos alejando del enfoque de la extensión de archivo en favor de [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). @@ -32,13 +32,13 @@ Actualmente, los recursos como scripts, estilos externos, fuentes e imágenes ge También estamos considerando que sean compatibles con Suspense, de modo que puedas tener imágenes, CSS y fuentes que bloqueen la visualización hasta que se carguen, pero que no bloqueen la transmisión y el renderizado simultáneo. Esto puede ayudar a evitar el [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) cuando los elementos visuales aparecen y provocan cambios en la presentación. -## Optimizaciones del renderizado stático de servidor {/*static-server-rendering-optimizations*/} +## Optimizaciones del renderizado estático de servidor {/*static-server-rendering-optimizations*/} La Generación de Sitios Estáticos (SSG) y la Regeneración Estática Incremental (ISR) son excelentes formas de conseguir rendimiento para páginas que se pueden almacenar en caché, pero creemos que podemos agregar funcionalidades para mejorar el rendimiento del Renderizado del Lado del Servidor (SSR) dinámico, especialmente cuando la mayoría pero no todo el contenido se puede almacenar en caché. Estamos explorando formas de optimizar el renderizado en el servidor utilizando compilación y pases estáticos. ## Compilador de optimización de React {/*react-compiler*/} -Presentamos una [vista previa anticipada](https://www.youtube.com/watch?v=lGEMwh32soc) de React Forget en React Conf 2021. Es un compilador que genera automáticamente llamadas equivalentes a `useMemo` y `useCallback` para minimizar el costo de volver a renderizar, al mismo tiempo que conserva el modelo de programación de React. +Presentamos una [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) de React Forget en React Conf 2021. Es un compilador que genera automáticamente llamadas equivalentes a `useMemo` y `useCallback` para minimizar el costo de volver a renderizar, al mismo tiempo que conserva el modelo de programación de React. Recientemente, terminamos una reescritura del compilador para hacerlo más confiable y eficiente. Esta nueva arquitectura nos permite analizar y memorizar patrones más complejos, como el uso de [mutaciones locales](/learn/keeping-components-pure#local-mutation-your-components-little-secret), y abre muchas nuevas oportunidades de optimización en tiempo de compilación más allá de simplemente igualar los hooks de memoización. @@ -54,12 +54,12 @@ Offscreen introduce una tercera opción: ocultar la interfaz de usuario visualme Offscreen es una función de bajo nivel que desbloquea funciones de alto nivel. Similar a otras características concurrentes de React, como `startTransition`, en la mayoría de los casos no interactuarás directamente con la API de Offscreen, sino más bien a través de un framework rígido para implementar patrones como: -* **Instant transitions.** Algunos frameworks de enrutamiento ya precargan datos para acelerar las navegaciones subsecuentes, como cuando se pasa el cursor sobre un enlace. Con Offscreen, también podrán prerrenderizar la próxima pantalla en segundo plano. -* **Reusable state.** De manera similar, al navegar entre rutas o pestañas, puedes utilizar Offscreen para preservar el estado de la pantalla anterior, de modo que puedas regresar y retomar desde donde lo dejaste. -* **Virtualized list rendering.** Cuando se muestran grandes listas de elementos, los frameworks de listas virtualizadas prerrenderizarán más filas de las que están actualmente visibles. Puedes utilizar Offscreen para prerrenderizar las filas ocultas con una prioridad menor que los elementos visibles en la lista. -* **Backgrounded content.** También estamos explorando una característica relacionada para dar menor prioridad al contenido en segundo plano sin ocultarlo, por ejemplo, al mostrar un modal superpuesto. +* **Transiciones instantáneas.** Algunos frameworks de enrutamiento ya precargan datos para acelerar las navegaciones subsecuentes, como cuando se pasa el cursor sobre un enlace. Con Offscreen, también podrán prerrenderizar la próxima pantalla en segundo plano. +* **Estado reutilizable.** De manera similar, al navegar entre rutas o pestañas, puedes utilizar Offscreen para preservar el estado de la pantalla anterior, de modo que puedas regresar y retomar desde donde lo dejaste. +* **Renderizado de listas virtualizadas.** Cuando se muestran grandes listas de elementos, los frameworks de listas virtualizadas prerrenderizarán más filas de las que están actualmente visibles. Puedes utilizar Offscreen para prerrenderizar las filas ocultas con una prioridad menor que los elementos visibles en la lista. +* **Contenido en segundo plano.** También estamos explorando una característica relacionada para dar menor prioridad al contenido en segundo plano sin ocultarlo, por ejemplo, al mostrar un modal superpuesto. -## Transition Tracing {/*transition-tracing*/} +## Rastreo de transiciones {/*transition-tracing*/} Actualmente, React cuenta con dos herramientas de perfilado. El [original Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) muestra una descripción general de todos los commits en una sesión de perfilado. Para cada commit, también muestra todos los componentes que se han renderizado y el tiempo que les llevó renderizarse. También tenemos una versión beta de un [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) presentado en React 18, que muestra cuándo los componentes programan actualizaciones y cuándo React trabaja en estas actualizaciones. Ambos perfiladores ayudan a los desarrolladores a identificar problemas de rendimiento en su código. @@ -69,10 +69,10 @@ Anteriormente intentamos resolver este problema creando una [Interaction Tracing Estamos trabajando en una nueva versión de la API de Rastreo de Interacciones (llamada provisionalmente Transition Tracing debido a que se inicia mediante `startTransition`) que resuelve estos problemas. -## Nueva documentacion de React {/*new-react-docs*/} +## Nueva documentación de React {/*new-react-docs*/} -El año pasado, anunciamos la versión beta del nuevo sitio web de documentación de React ([later shipped as react.dev](/blog/2023/03/16/introducing-react-dev)). Los nuevos materiales de aprendizaje enseñan primero los Hooks y cuentan con nuevos diagramas, ilustraciones, así como muchos ejemplos y desafíos interactivos. Pausamos ese trabajo para centrarnos en el lanzamiento de React 18, pero ahora que React 18 ya está disponible, estamos trabajando activamente para finalizar y lanzar la nueva documentación. +El año pasado, anunciamos la versión beta del nuevo sitio web de documentación de React ([más tarde lanzado como react.dev](/blog/2023/03/16/introducing-react-dev)). Los nuevos materiales de aprendizaje enseñan primero los Hooks y cuentan con nuevos diagramas, ilustraciones, así como muchos ejemplos y desafíos interactivos. Pausamos ese trabajo para centrarnos en el lanzamiento de React 18, pero ahora que React 18 ya está disponible, estamos trabajando activamente para finalizar y lanzar la nueva documentación. -Actualmente estamos redactando una sección detallada sobre los efectos, ya que hemos escuchado que es uno de los temas más desafiantes tanto para usuarios nuevos como experimentados de React. [Synchronizing with Effects](/learn/synchronizing-with-effects) es la primera página publicada en la serie, y habrá más en las próximas semanas. Cuando comenzamos a escribir una sección detallada sobre los efectos, nos dimos cuenta de que muchos patrones comunes de efectos pueden simplificarse al agregar un nuevo primitivo a React. Hemos compartido algunas ideas iniciales sobre esto en el [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Actualmente se encuentra en una etapa inicial de investigación y aún estamos iterando sobre la idea. Agradecemos los comentarios de la comunidad hasta ahora sobre el RFC, así como la [feedback](https://github.com/reactjs/reactjs.org/issues/3308) y contribuciones a la reescritura en curso de la documentación. Queremos agradecer especialmente a [Harish Kumar](https://github.com/harish-sethuraman) por enviar y revisar muchas mejoras en la implementación del nuevo sitio web. +Actualmente estamos redactando una sección detallada sobre los efectos, ya que hemos escuchado que es uno de los temas más desafiantes tanto para usuarios nuevos como experimentados de React. [Sincronizar con Efectos](/learn/synchronizing-with-effects) es la primera página publicada en la serie, y habrá más en las próximas semanas. Cuando comenzamos a escribir una sección detallada sobre los efectos, nos dimos cuenta de que muchos patrones comunes de efectos pueden simplificarse al agregar un nuevo primitivo a React. Hemos compartido algunas ideas iniciales sobre esto en el [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Actualmente se encuentra en una etapa inicial de investigación y aún estamos iterando sobre la idea. Agradecemos los comentarios de la comunidad hasta ahora sobre el RFC, así como el [feedback](https://github.com/reactjs/reactjs.org/issues/3308) y contribuciones a la reescritura en curso de la documentación. Queremos agradecer especialmente a [Harish Kumar](https://github.com/harish-sethuraman) por enviar y revisar muchas mejoras en la implementación del nuevo sitio web. -*¡Gracias a [Sophie Alpert](https://twitter.com/sophiebits) por revisar esta publicación en el blog!* +*¡Gracias a [Sophie Alpert](https://twitter.com/sophiebits) por revisar esta publicación del blog!* From 965592ef2b06d963b42d2c5cc8f8f2d2b2da1aff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= <20783123+mateoguzmana@users.noreply.github.com> Date: Fri, 11 Aug 2023 22:26:44 +0200 Subject: [PATCH 3/3] Apply suggestions from code review --- .../15/react-labs-what-we-have-been-working-on-june-2022.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 95d353713..4aa96519c 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -30,7 +30,7 @@ Estamos trabajando en colaboración con Vercel y Shopify para unificar el soport Actualmente, los recursos como scripts, estilos externos, fuentes e imágenes generalmente se precargan y cargan utilizando sistemas externos. Esto puede dificultar la coordinación en nuevos entornos como la transmisión de datos, los componentes del servidor y otros. Estamos evaluando la posibilidad de agregar APIs para precargar y cargar recursos externos sin duplicaciones a través de APIs de React que funcionen en todos los entornos de React. -También estamos considerando que sean compatibles con Suspense, de modo que puedas tener imágenes, CSS y fuentes que bloqueen la visualización hasta que se carguen, pero que no bloqueen la transmisión y el renderizado simultáneo. Esto puede ayudar a evitar el [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) cuando los elementos visuales aparecen y provocan cambios en la presentación. +También estamos considerando que sean compatibles con Suspense, de modo que puedas tener imágenes, CSS y fuentes que bloqueen la visualización hasta que se carguen, pero que no bloqueen la transmisión y el renderizado simultáneo. Esto puede ayudar a evitar [cambios rápidos y caóticos (popcorning)](https://twitter.com/sebmarkbage/status/1516852731251724293) cuando los elementos visuales aparecen y provocan cambios en la presentación. ## Optimizaciones del renderizado estático de servidor {/*static-server-rendering-optimizations*/} @@ -61,7 +61,7 @@ Offscreen es una función de bajo nivel que desbloquea funciones de alto nivel. ## Rastreo de transiciones {/*transition-tracing*/} -Actualmente, React cuenta con dos herramientas de perfilado. El [original Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) muestra una descripción general de todos los commits en una sesión de perfilado. Para cada commit, también muestra todos los componentes que se han renderizado y el tiempo que les llevó renderizarse. También tenemos una versión beta de un [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) presentado en React 18, que muestra cuándo los componentes programan actualizaciones y cuándo React trabaja en estas actualizaciones. Ambos perfiladores ayudan a los desarrolladores a identificar problemas de rendimiento en su código. +Actualmente, React cuenta con dos herramientas de perfilado. El [perfilador original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) muestra una descripción general de todos los commits en una sesión de perfilado. Para cada commit, también muestra todos los componentes que se han renderizado y el tiempo que les llevó renderizarse. También tenemos una versión beta de un [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) presentado en React 18, que muestra cuándo los componentes programan actualizaciones y cuándo React trabaja en estas actualizaciones. Ambos perfiladores ayudan a los desarrolladores a identificar problemas de rendimiento en su código.e Nos hemos dado cuenta que a los desarrolladores no les resulta muy útil conocer acerca de commits individuales lentos o componentes fuera de contexto. Es más util saber qué es lo que realmente provoca que los commits sean lentos. Y que los desarrolladores desean poder rastrear interacciones específicas (por ejemplo, un clic en un botón, una carga inicial o una navegación de página) para detectar regresiones de rendimiento y comprender por qué una interacción fue lenta y cómo solucionarla.