React, modern web geliştirmedeki en büyük ön uç Javascript çerçevesidir. Bununla birlikte, Svelte son birkaç yıldır popülaritesini istikrarlı bir şekilde artırmaktadır. Svelte'i bu kadar özel yapan şey.

• Sözdizimini öğrenmek çok kolay
• Çerçeveyi tarayıcıya göndermek yerine, kod standart js olarak derlenir, bu da ÇOK daha küçük paket boyutu ve parlak hızlı kod ile sonuçlanır.

SolidJS, sözdizimi React'e çok benzeyen ancak Svelte gibi modern javascript'e derlenen, insanların Svelte'nin hız ve paket boyutlarını elde etmelerine, ancak alıştıkları React sözdizimini kullanmalarına olanak tanıyan bir ön uç UI çerçevesidir.

SolidJS Projesi Kurmak

Yeni bir proje oluşturmak için aşağıdaki komutu çalıştırmanız yeterlidir…

npm init solid app ProjectName

veya daktilo için

npm init solid app-ts ProjectName

Ne aynı

• Oluşturulan projenin dosya yapısı, hemen hemen bir oluştur-tepki-uygulaması gibi hissetmelidir.
• JSX hala JSX gibi çalışıyor

Dolayısıyla, React'te bir durum değişkeni oluşturmak için normalde useState kancasını kullanırsınız ve süreç SolidJS'de hemen hemen aynı şekilde çalışır, ancak şimdi createSignal işlevini kullanıyoruz.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

Yaşam döngüsü ve createEffect

İşte Solid in Thinking in React'te düşünmenin çok farklı olduğu yer burasıdır. React'te tüm bileşen, bileşenin işlev gövdesindeki işlev çağrılarında durumu değiştirirken sonsuz döngüyü mümkün kılan güncellemeleri her belirttiğinizde yeniden çalışan bir işlevdir. React'te, bunun çözümü, bu tür bir kodu, bileşen işlevinin her oluşturmasında değil, istenildiğinde çalıştırılması için useEffect kancasıyla kendi kapanışına taşımaktır.

Solid, sanal bir DOM kullanmaz ve durum güncellemelerinde bileşen işlevini tekrar çalıştırmaz. Bunun yerine, Reaktif kod, createEffect çağrılarına sarılır ve daha sonra, içlerindeki herhangi bir sinyal güncellendiğinde işlevi yeniden çalıştırır. Bunun yararı ...

• Sonsuz döngülerden kaçınmak için, onları kullanımda sarmaya gerek kalmadan Getirme / Axios çağrıları yapabilirsiniz
• JSX otomatik olarak createEffect çağrılarında derlenecektir, bu yüzden durum güncellendiğinde güncelleneceklerdir.

Bununla ilgili güzel olan şey, güncellemelerin daha ayrıntılı olması ve sanal bir doma ihtiyaç duyulmamasıdır (yalnızca güncellenmiş verilere bağlı olan kod, herhangi bir karşılaştırma yapmak zorunda kalmadan değişecektir.)

Sonuç olarak

Solid, React Sözdizimi ile ilgili harika olanı korur, ancak aynı zamanda Svelte'nin performans artırıcı yaklaşımlarından da yararlanır. SolidJS'nin Svelte ve React gibi Framework'ler ile aynı şekilde büyüdüğünü görmek beni şaşırtmaz!