Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for SolidJs o novo React, porem melhor 😎
Tauan Camargo
Tauan Camargo

Posted on

     

SolidJs o novo React, porem melhor 😎

Introdução

Comecei a trabalhar profissionalmente com react a uns 4 anos, tive o prazer de ver essa library virar o que se tornou atualmente, antes tínhamos de criarsmart components estendendo a classComponent do react, depois tivemos a introdução dos hooks aonde ao invés de utilizar class components utilizamos function components com os hooks[useState, useEffect, useMemo, useContext, useReducer], isso fez com que a verbosidade do código desse uma leve diminuida.

"OK, mas esse post não é sobre SolidJs?"

Para falarmos sobre osolid-js temos que dar um contexto de como as coisas são feitas noreact.

Aqui temos um exemplo utilizando os Hooks do react para um simples component de contador.

functionCounter(){const[count,setCount]=useState(0)useEffect(()=>{setInterval(()=>{setCount(count+1)},1000)})return<div>Count:{count}</div>}
Enter fullscreen modeExit fullscreen mode

"Mas pera ai, esse useEffect fica me estourando um warning", sim, ele dirá que esta faltando uma dependência noArray dependency do useEffect, bora adicionar para parar com warning.

functionCounter(){const[count,setCount]=useState(0)useEffect(()=>{setInterval(()=>{setCount(count+1)},1000)},[count])return<div>Count:{count}</div>}
Enter fullscreen modeExit fullscreen mode

Vamos rodar o projeto:

Re-run glitch

Mas agora nos deparamos com outro problema, apos alguns anos trabalhando com react começamos a lutar contra esse problema diariamente, o famosore-run, podemos solucionar esse problema dere-run no component Counter de algumas formas:

  • Retornando douseEffect uma function que limpa osetInterval
  • Utilizando osetTimeout no lugar dosetInterval (uma ótima pratica porem seria necessário a abordagem a cima de limpar a função)
  • Usando a própria função para retornar o valor anterior diretamente como o valor atual

Vamos utilizar a última opção aqui:

functionCounter(){const[count,setCount]=useState(0)useEffect(()=>{setInterval(()=>{setCount(prevCount=>prevCount+1)},1000)},[])return<div>Count:{count}</div>}
Enter fullscreen modeExit fullscreen mode

Chegamos a uma ideia de que o react tem uma "falsa reatividade" 🧐 .

Vamos falar um pouco sobre o SolidJS

Primeiro de tudo, solid-js nao esta tentando re-inventar a roda, solid-js é identico ao react, vamos criar nosso component Counter utilizando o solid-js.

functionCounter(){const[count,setCount]=createSignal(0)setInterval(()=>{setCount(count()+1)},1000)console.log('the counter called!')return<div>Count:{count()}</div>}
Enter fullscreen modeExit fullscreen mode

Vemos aqui uma grande diferença,count no solid é uma função. no solid isso é chamadoaccessor e isso é uma das coisas misticas por tras de como o solid funciona. Okay observámos no react que temos que fazer uma limpeza do setInterval ou pegar o valor da própria funçãosetCount para retornar o valor anterior como valor corrente, para poder funcionar sem o famosore-render, certo?

Não, :D só esse código já funciona.

Adicionamos umconsole.log para verificar quantas vezes foi renderizado esse component durante a atualização do count, checaremos quantas vezes ele roda no console:

Image description

Magic!!!! No solid seu código não roda mais de uma vez a não ser que isso seja requerido em algum momento do código.

Mas como Solid funciona?

O gerenciamento de dados do Solid é construído a partir de um conjunto de primitivas reativas flexíveis que são responsáveis por todas as atualizações. Ele tem uma abordagem muito semelhante ao MobX ou Vue, exceto que nunca troca sua granularidade por um VDOM. Dependências são rastreadas automaticamente quando você acessa seus valores reativos em seus efeitos e código JSX View, os primitivos do Solid vêm na forma de chamadas create que geralmente retornam tuplas, onde geralmente o primeiro elemento é um primitivo legível e o segundo é um setter. É comum referir-se apenas à parte legível pelo nome primitivo.

Primitivos

O Solid é composto de 3 primitivas primárias:Signal,Memo eEffect. Em seu núcleo está o padrão Observer, onde Signals (e Memos) são rastreados envolvendo Memos e Effects.

Os Signals são os primitivos mais simples. Eles contêm valor e funçõesget eset para que possamos interceptar quando eles são lidos e escritos.

const[count,setCount]=createSignal(0);
Enter fullscreen modeExit fullscreen mode

Effects são funções que envolvem leituras de nosso Signal e são executadas novamente sempre que o valor de um Signal dependente muda. Isso é útil para criar efeitos colaterais, como renderização.

createEffect(()=>console.log("The latest count is",count()));
Enter fullscreen modeExit fullscreen mode

Finalmente,Memos são valores derivados armazenados em cache. Eles compartilham as propriedades de Signals e Effects. Eles rastreiam seus próprios Signals dependentes, reexecutando apenas quando eles mudam, e eles próprios são Signals rastreáveis.

constfullName=createMemo(()=>`${firstName()}${lastName()}`);
Enter fullscreen modeExit fullscreen mode

Como esse Signal funciona?

Signals são emissores de eventos que contêm uma lista de assinaturas. Eles notificam seus assinantes sempre que seu valor muda.

As coisas ficam mais interessantes como essas assinaturas acontecem. Solid usa rastreamento automático de dependência. As atualizações acontecem automaticamente conforme os dados mudam.

O truque é uma pilha global em tempo de execução. Antes que um Effect ou Memo execute (ou reexecute) sua função fornecida pelo desenvolvedor, ele empurra a si mesmo para aquela pilha. Então, qualquer Signal que é lido verifica se há um ouvinte atual na pilha e, se houver, adiciona o ouvinte às suas assinaturas.

Você pode pensar assim:

functioncreateSignal(value){constsubscribers=newSet();constread=()=>{constlistener=getCurrentListener();if(listener)subscribers.add(listener);returnvalue;};constwrite=(nextValue)=>{value=nextValue;for(constsubofsubscribers)sub.run();};return[read,write];}
Enter fullscreen modeExit fullscreen mode

Link Github SolidJs:SolidJS

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Senior FullStack Engineer 💻 web | 📱 mobile | 🖥️desktop | 8+ Years Experience | Let's connect! 🌟
  • Location
    Anápolis - Go
  • Work
    Full Stack Developer
  • Joined

More fromTauan Camargo

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp