¿Por qué React es tan grande dada su pequeña API?


88

Aquí están los números

  • min + gzip 26k
  • gzip 90k
  • original 450 + k

Y React no tiene muchas características en su documentación. porque es tan grande?

Tengo la sensación de que es la implementación de DOM ligero. Pero quiero estar seguro.


4
¿Ha echado un vistazo a la fuente para ver qué hace? Consejo útil, no mires la versión reducida.
Mr Lister

6
Decidí preguntar antes de bucear en código. Aunque como planeo usar
React, bucearía

2
26k no es tan grande en absoluto ..
BT

La gente dice que reaccionar no es grande. Sí, reactjs en sí es muy pequeño (6.41KB para la versión 16.1.1) pero recuerde que React requiere un ReactDOM para funcionar y ReactDOM tiene 92.4KB de tamaño
Dinh Tran

Respuestas:


187

¡React hace bastante! La mayor parte no obvia de React es probablemente el sistema de eventos: React no solo implementa su propio envío y propagación de eventos, sino que normaliza los eventos comunes en los navegadores para que no tenga que preocuparse tanto por eso. Por ejemplo, SelectEventPlugin es un "complemento" de eventos integrado que proporciona un onSelectevento que se comporta de la misma manera en todos los navegadores.

La implementación del DOM virtual también requiere una cantidad decente de código; se dedica mucho esfuerzo a la optimización del rendimiento, razón por la cual la versión no reducida incluye ReactPerf , que es una herramienta para medir el rendimiento del renderizado. Al actualizar el DOM, React también hace algunas cosas convenientes para usted, como mantener cualquier selección de entrada y mantener la misma posición de desplazamiento actual.

React también tiene algunos otros trucos bajo la manga. Uno de los mejores es que es totalmente compatible con la representación de un componente en una cadena HTML incluso si no tiene un entorno de navegador, por lo que puede enviar una página que funcione incluso antes de que se cargue JS.


¿Con qué estás comparando React? react-15.0.2.min.jses 43k (gzipped), pero jQuery es 33k mientras que ember-2.6.0.prod.jses 363k (also gzipped). Obviamente, estos marcos no hacen exactamente las mismas cosas, pero tienen mucha superposición, por lo que creo que la comparación es razonable.

Si le preocupa el tamaño de la descarga, no me preocuparía demasiado que el código JS contribuya a eso. Aquí hay un anuncio que veo en el lado derecho de mi página de Stack Overflow en este momento:

Su tamaño de descarga es de 95k; no lo pensaría dos veces antes de incluir una imagen como esa en una página porque (incluso si estuviera preocupado por el rendimiento) generalmente hay muchas otras cosas relacionadas con el rendimiento que corregir que son más lucrativas.


En resumen, no creo que React sea tan grande, y el tamaño que tiene proviene de las muchas cosas pequeñas que hace para ayudarte. Citas la pequeña API de React como una razón por la que el código de React debería ser pequeño, pero una mejor pregunta podría ser: "¿Cómo puede la API de React ser tan simple dadas todas las cosas que hace por ti?"

… Pero esa es una pregunta totalmente separada. :) Espero haber respondido a tu pregunta, feliz de expandirme si no lo hice.


4
Respondiste totalmente a mi pregunta. Reaccionar es asombroso. Estoy pensando en usarlo para dispositivos móviles, por lo que el tamaño es importante. Es solo que no hay mucha información sobre lo que hace. Y estoy pensando que hay más trucos que puedo usar :) Siento que puedo deshacerme de las cosas de jquery. Y paulmillr / exoesqueleto está justo a tiempo :)
Eldar Djafarov

2
Estoy investigando un concepto totalmente diferente de creación de aplicaciones. Visite vimeo.com/78151404 y github.com/component/component : usar aquellos que no necesita jQuery en absoluto y compy funciona bien con jsxtransformations. Y React hace el trabajo más difícil: todo lo demás (modelos, enrutamientos, comunicación con el servidor) podría estar cubierto por microcomponentes.
Eldar Djafarov

30
Tenga en cuenta que estamos usando React en el sitio web móvil de Facebook donde el tamaño es definitivamente extremadamente importante :)
Vjeux

4
@lightblade Um ... nop. El uso de memoria depende de cuántas asignaciones haga su código. React se esfuerza mucho por evitar asignaciones.
Dan Abramov

2
@ 1nfiniti Bien, actualizado con algunos números nuevos desde hace dos años y medio.
Sophie Alpert

-1

Un par de pensamientos ... Tenía algunas de las mismas preocupaciones con su tamaño, pero después de usarlo, no es broma, lo usaría si tuviera 5 MB de tamaño. Es tan bueno. Dicho esto, decidí reducir tantas dependencias de otras bibliotecas como fuera posible. Estaba usando jquery para dos cosas ... ajax y la respuesta automática ajax y el manejo de solicitudes (beforeSend, etc.) que manejarían cuando un token estaba en una respuesta después del inicio de sesión, y luego me aseguraba de que cada solicitud ajax lo agregara al encabezado de Autorización antes enviando. Reemplacé esto con un pequeño fragmento de javascript nativo. Funciona genial. Además, estaba tratando de usar _underscore. Lo reemplacé con lodash, que es más pequeño y más rápido, aunque actualmente no lo estoy usando, por lo que puedo eliminarlo por completo.

Aquí hay un artículo, de muchos en Google, que encontré que tiene algunas alternativas usando JS nativo sobre jquery.

http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/


1
También puede crear una versión personalizada de jQuery con las piezas que usa si tiene como objetivo varios navegadores
Dan Heberden
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.