Analisamos as diferenças entre o React, precursor do JSX, e o Solid.js, derivado do JSX e que, ao contrário do React, não usa DOM virtual.
Partindo do pressuposto de um desenvolvedor React tentando abordar o Solid.js, há basicamente as seguintes diferenças.
- As funções de hook do React só podem ser usadas dentro da função do componente, enquanto as funções de gerenciamento de estado do SolidJS não têm restrições de chamada, quase como uma tecnologia de gerenciamento de estado independente.
- A função de side effect do React,
useEffect, permite fornecer de uma vez o tratamento do efeito colateral e sua limpeza, além de possibilitar a definição manual dos estados afetados; já a função de side effect do Solid.js,createEffect, como no Svelte, reage ao gerenciamento de estado declarado no corpo, não recebe manualmente os estados afetados e não fornece uma função de retorno, mas oferece um ambiente de ciclo de gerenciamento de estado no qual é possível usar uma função de limpeza viaonCleanup. - Quanto ao gerenciamento do escopo de estado, não há diferença de uso em relação ao React.
- Para componentes dinâmicos, condições e loops, o React permite lidar facilmente com isso usando lógica JS, já que o corpo é reescrito quando o estado muda; no Solid, como o corpo é mantido, isso pode ser resolvido por meio dos componentes embutidos fornecidos.
- Os componentes
lazye<Suspense>do React também são oferecidos no Solid.js. - Diferentemente do React, o Solid fornece funções utilitárias de gerenciamento de estado pensadas para reatividade assíncrona.
- O uso de
refno React e no Solid.js é parecido, mas enquanto no React normalmente se usa uma função dedicada comouseRefpara referências, no Solid.js isso pode ser feito simplesmente com uma variávellet. - O Solid.js, assim como o Svelte, oferece a característica de ações
usepara gerenciar o ciclo de vida do JavaScript vanilla. - As propriedades (Props) do React podem ser usadas isoladamente por meio de desestruturação sem problemas, porque o corpo é reescrito quando elas mudam; porém, se esse método for usado no Solid.js, não haverá reatividade, então não é possível usar propriedades isoladas por desestruturação. É necessário usar o objeto como está ou separá-lo com funções utilitárias que oferecem divisão ou mesclagem de objetos (
splitPropsetc.), continuando a tratá-lo como objeto.
1 comentários
A maior diferença é entre
useStateeuseSignal, né? Lembro que sofri muito para depurar porque o binding dos dados não fica visível.