Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
QA
  • Loading branch information
lilymartinez committed Aug 9, 2023
commit 6af24f4f2ac33b5a60345629ebda5a9bad2da291
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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.

Expand All @@ -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.

Expand All @@ -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!*