Dos versiones, un comportamiento
El mismo panel, escrito dos veces a partir de una especificación: una con React y otra sin ningún framework. Elige un escenario y las dos lo ejecutan a la vez, aquí en tu navegador.
¿Se comportan igual?
Esperando a que arranquen las dos versiones.
- React
- TypeScript sin framework
Un paso es cualquier cosa que una persona puede notar: una solicitud, un cambio de estado, una fase de carga, un anuncio o un movimiento del foco. El tiempo no cuenta; el orden y el contenido deben coincidir.
React
React 19, hooks y un reducer
- Lista en
- Midiendo…
- JavaScript descargado
- Midiendo…
- Pasos en esta ejecución
- 0
Último anuncio: ninguno todavía
El teclado y el lector de pantalla están en esta versión.
Solo visible: ahora no es accesible con el teclado ni con un lector de pantalla.
TypeScript sin framework
Sin framework ni dependencias en ejecución
- Lista en
- Midiendo…
- JavaScript descargado
- Midiendo…
- Pasos en esta ejecución
- 0
Último anuncio: ninguno todavía
El teclado y el lector de pantalla están en esta versión.
Solo visible: ahora no es accesible con el teclado ni con un lector de pantalla.
Medido en tu navegador en esta visita, con las dos versiones cargando a la vez. Las cifras cambian con el dispositivo, la red y la caché; recarga para medir de nuevo.
Al compilar
| Medida | React | TypeScript sin framework |
|---|---|---|
| Líneas de código (no vacías) | 1063 | 1061 |
| Archivos de código | 14 | 8 |
| Dependencias en ejecución | react, react-dom | Ninguna |
Las dos versiones usan además la especificación compartida: 2212 líneas de datos, reglas, formatos y textos que ninguna repite.
Dónde costó más cada versión
| Tema | React | TypeScript sin framework |
|---|---|---|
| Conservar el orden y las vistas | Gratis: el estado del componente sobrevive a una actualización de datos. | Un pequeño objeto de memoria los guarda mientras se reconstruye el cuerpo. |
| Conservar el foco del teclado | Gratis: un botón que se vuelve a renderizar es el mismo elemento. | Los controles reconstruibles llevan una clave; el foco vuelve al que coincide. |
| Activar a tiempo los temporizadores de carga | Necesita useLayoutEffect; si no, el temporizador de 300 ms empieza un fotograma tarde. | Se activan directamente en la misma tarea que el renderizado. |
| Tamaño de descarga | El runtime de React es la mayor parte del paquete. | Solo se envía el propio panel. |