SolidJS vs. React: la guía práctica

En la superficie, SolidJS y React parecen estar estrechamente relacionados. Los marcos del lado del cliente son mutuamente inteligibles y ambos se utilizan para crear aplicaciones de una sola página (SPA). Si bien la experiencia del desarrollador es casi idéntica para ambos, los mecanismos subyacentes de cada marco son un contraste notable.

Ambos marcos SPA son responsables de compartimentar la estructura y la funcionalidad de la página internet de una aplicación, pero en un navegador, estos marcos manipulan los elementos HTML de las páginas de manera diferente para brindar la experiencia de usuario deseada. SolidJS y React difieren en su uso del Modelo de objeto de documento (DOM). Ampliemos cómo los componentes de React y SolidJS permiten que la lógica de la aplicación imite un sitio internet de varias páginas.

Una breve comparación

Creo firmemente en un enfoque TL; DR, por lo que he resumido y presentado las principales diferencias de React y SolidJS en la siguiente tabla:

Ahora entraremos en más detalles sobre las similitudes y diferencias entre React y SolidJS.

Estructura del componente

React y SolidJS tienen exactamente las mismas estructuras programáticas y soporte para componentes (piezas de código individuales y reutilizables).

Tanto en React moderno como en SolidJS, un componente consta de un render función con propiedades como argumentos. Junto con cada componente JSX, el código es estricto y sucinto. JSX es fácil de asimilar y permite a los desarrolladores experimentados describir visualmente el modelo de un componente en su definición.

React y SolidJS ofrecen los mismos componentes, pero cada marco tiene un enfoque de representación único. Reaccionar componentes renderizar cada vez (salvo el uso de memorización), mientras que los componentes de SolidJS solo se renderizan una vez.

Otra diferencia entre los dos marcos son sus diferentes características que permiten la funcionalidad de los componentes.

Funcionalidad del componente

Un componente sin funcionalidad es solo marcado. Entonces, ¿cómo hacen React y SolidJS para que los componentes sean operativos? Sus enfoques son similares:

Debajo del capó, tanto los ganchos como las primitivas reactivas son una forma de conectarse a los respectivos sistemas de gestión de cambios React y SolidJS. En basic, los dos marcos manejan funciones componentes de manera related, pero emplean diferentes métodos o nomenclaturas para hacerlo.

Exploremos diferencias de funcionalidad más complejas: estado, memorización y efectos.

Expresar

A veces, un marco necesitará rastrear información y ciertas propiedades vinculadas a un componente. Este concepto se conoce como estado y se puede acceder en React con el useState función. En SolidJS, este concepto se conoce como señal, y su función de creación correspondiente es createSignal.

Indica y señala los datos de los componentes de la casa (en forma de accesorios), lo que permite que el marco realice un seguimiento de los cambios de valor. Y cuando el marco detecta un cambio, el componente se representa con los valores correspondientes.

Efecto

Un efecto es una función especial que es un bloque de construcción central tanto en React como en SolidJS. En lugar de responder a una interacción directa del usuario con el navegador, se activa un efecto cuando cambia el estado de un componente, related a una devolución de llamada o un detector de eventos.

React outline un efecto con el useEffect mientras que SolidJS usa la función createEffect función.

Memoización

La memorización optimiza el rendimiento del marco mediante el almacenamiento en caché de los costosos resultados de procesamiento de componentes y el uso de valores almacenados en caché cuando sea apropiado en lugar de volver a calcular los valores. En React, nosotros implementar memorización mediante el uso de uno de los tres ganchos:

React depende de la memorización para que sus aplicaciones se rendericen rápidamente. Por el contrario, debido a su seguimiento de cambios optimizado y al uso de DOM, SolidJS rara vez requiere una memorización explícita. Para casos extremos en los que los cambios de accesorios de componentes no implican una actualización de renderizado, SolidJS administra la memorización a través de un único método llamado createMemo.

Actuación

SolidsJS y React tienen diferencias de rendimiento que van más allá de sus enfoques de memorización. Los dos lenguajes abordan la manipulación de HTML de maneras muy diferentes. El punto focal de esta diferencia es cómo cada uno actualiza el DOM del navegador.

El fundador de React le dio un DOM digital liviano para interactuar con el DOM actual del navegador. El código de React hace que su propio DOM digital se actualice a medida que se procesan los componentes. React luego compara el DOM digital actualizado con el DOM del navegador, y los cambios identificados se traspasan a la estructura de la página actual (es decir, el DOM).

Podríamos argumentar que, debido a que React vuelve a renderizar los componentes de forma predeterminada, basándose en los cálculos de diferencia de DOM para las actualizaciones, React está haciendo su trabajo dos veces. Dado que renderiza componentes cada vez, React requiere memorización para evitar cálculos innecesarios y repetitivos.

Por el contrario, el fundador de SolidJS logró esquivar todo este viaje de ida y vuelta. Mediante un mecanismo llamado reactividad de grano fino para manipular directamente el DOM del navegador, SolidJS ofrece una huella de memoria mucho más ligera y una aplicación increíblemente rápida de ediciones de página y código inyectado.

La reactividad de grano fino sigue las interdependencias variables. En función de la dependencia de variables y las cadenas de edición, SolidJS limita las actualizaciones de la estructura de nuestra página para reflejar solo lo que ha cambiado, evitando renderizaciones de componentes innecesarias. Esto da como resultado una mejora masiva del rendimiento con respecto a React.

Aunque estoy tentado a terminar el artículo aquí y decir que SolidJS es el claro ganador debido a su rapidez, sigue siendo importante analizar cómo se comparan los dos marcos en términos de eficiencia del desarrollador.

Productividad del desarrollador

Hay algunas consideraciones clave cuando consideramos la productividad del desarrollador en React versus SolidJS:

Una revisión de los casos de uso específicos de su proyecto puede revelar qué marco es una mejor opción, en términos de productividad.

SolidJS frente a reaccionar

Tengo una experiencia appreciable tanto con SolidJS como con React. Desde mi perspectiva, SolidJS es el claro ganador de los dos. SolidJS coincide con la potencia y las características sólidas de React. Además, ofrece una capacidad de respuesta rápida a los usuarios finales que no tiene comparación con React.

Para Reaccionar desarrollador para ponerse al día con SolidJS, que aprovecha las lecciones, la estructura y los enfoques abstractos aprendidos durante la vida útil de React, casi no hay curva de aprendizaje. Le recomiendo que comience a usar SolidJS hoy mismo; puede ser el futuro de la interfaz de usuario.

El equipo editorial del Weblog de Ingeniería de Toptal extiende su agradecimiento a Yonatan Bendahan por revisar el contenido técnico presentado en este artículo.

Lecturas adicionales en el weblog de ingeniería de Toptal: