14 puntos por composite 2023-07-13 | 1 comentarios | Compartir por WhatsApp

Analizamos las diferencias entre React, el creador original de JSX, y Solid.js, que deriva de JSX pero, a diferencia de React, no usa DOM virtual.

Suponiendo el caso de un desarrollador de React que se acerca a Solid.js, a nivel básico hay diferencias como las siguientes.

  • Las funciones hook de React solo pueden usarse dentro de la función del componente, mientras que las funciones de manejo de estado de SolidJS no tienen restricciones de invocación, casi como si fueran una tecnología de manejo de estado independiente.
  • La función de efectos secundarios useEffect de React permite manejar en una sola función tanto los efectos secundarios como su limpieza, y también permite indicar manualmente los estados afectados. En cambio, la función de efectos secundarios createEffect de Solid.js, como en Svelte, depende del manejo de estado indicado en el cuerpo; no recibe manualmente los estados afectados ni provee una función de retorno, pero ofrece un entorno de ciclo de vida del estado que permite usar una función de limpieza mediante onCleanup.
  • En cuanto al manejo del alcance del estado, no hay diferencias de uso frente a React.
  • Para componentes dinámicos, condiciones o bucles, React puede resolverlo fácilmente usando lógica de JS porque el cuerpo se vuelve a escribir cuando cambia el estado, pero en Solid, como el cuerpo se mantiene, se resuelve mediante los componentes integrados que ofrece.
  • Solid.js también ofrece los componentes lazy y <Suspense> de React.
  • A diferencia de React, Solid ofrece funciones utilitarias de manejo de estado pensadas para la reactividad asíncrona.
  • El uso de ref en React y en Solid.js es parecido, pero en Solid.js no hace falta una función dedicada como useRef para referencias, ya que puede usarse simplemente una variable let.
  • Solid.js, al igual que Svelte, ofrece la característica de acciones use para gestionar el ciclo de vida de JavaScript vanilla.
  • En React, las props pueden usarse de forma individual mediante desestructuración sin problemas porque el cuerpo se vuelve a escribir cuando cambian, pero si se usa este método en Solid.js no reaccionan; por eso no se pueden aprovechar props individuales mediante desestructuración y hay que usarlas como objeto o descomponerlas con funciones utilitarias que permiten dividir o fusionar objetos (splitProps, etc.) para seguir tratándolas como objetos.

1 comentarios

 
firea32 2023-07-17

La diferencia más grande es la diferencia entre useState y useSignal. Como no se ve cómo se enlazan los datos, recuerdo que me costó muchísimo trabajo depurarlo.