14 pontos por composite 2023-07-13 | 1 comentários | Compartilhar no WhatsApp

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 via onCleanup.
  • 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 lazy e <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 ref no React e no Solid.js é parecido, mas enquanto no React normalmente se usa uma função dedicada como useRef para referências, no Solid.js isso pode ser feito simplesmente com uma variável let.
  • O Solid.js, assim como o Svelte, oferece a característica de ações use para 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 (splitProps etc.), continuando a tratá-lo como objeto.

1 comentários

 
firea32 2023-07-17

A maior diferença é entre useState e useSignal, né? Lembro que sofri muito para depurar porque o binding dos dados não fica visível.