React jest zdecydowanie największym frontendowym frameworkiem Javascript we współczesnym tworzeniu stron internetowych. Chociaż Svelte zyskuje na popularności w ciągu ostatnich kilku lat. Co sprawia, że ​​Svelte jest tak wyjątkowy.

• Bardzo łatwa do nauczenia składnia
• Zamiast wysyłać framework do przeglądarki, kod jest kompilowany do standardowego js, ​​co powoduje DUŻO mniejszy rozmiar pakietu i niesamowicie szybki kod.

SolidJS to frontend UI framework, którego składnia jest bardzo podobna do React, ale jest skompilowana do nowoczesnego javascript, takiego jak Svelte, pozwala ludziom uzyskać szybkość i rozmiary pakietów Svelte, ale używa składni React, do której są przyzwyczajeni.

Konfigurowanie projektu SolidJS

Po prostu uruchom następujące polecenie, aby wygenerować nowy projekt…

npm init solid app ProjectName

lub na maszynie

npm init solid app-ts ProjectName

Co to jest to samo

• Struktura plików wygenerowanego projektu powinna przypominać aplikację „stwórz i zareaguj”
• JSX nadal działa jak JSX

Więc w Reakcie normalnie używałbyś hooka useState do generowania zmiennej stanu, a proces nadal działa prawie tak samo w SolidJS, z wyjątkiem tego, że teraz używamy funkcji createSignal.

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;

Cykl życia i createEffect

Tutaj Thinking in Solid bardzo różni się od myślenia w React. W Reakcie cały komponent jest funkcją, która jest uruchamiana ponownie za każdym razem, gdy aktualizujesz stan, umożliwiając nieskończone pętle podczas zmiany stanu wywołań funkcji w treści funkcji komponentu. W Reakcie rozwiązaniem tego problemu jest przeniesienie tego rodzaju kodu do jego własnego zamknięcia za pomocą haka useEffect, aby uruchamiał się w razie potrzeby, a nie na każdym renderowaniu funkcji komponentu.

Solid nie używa wirtualnego DOM i podczas aktualizacji stanu nie uruchamia ponownie funkcji komponentu. Zamiast tego kod Reactive jest zawijany w wywołaniach createEffect, które następnie ponownie uruchamiają funkcję, gdy jakikolwiek sygnał wewnątrz nich zostanie zaktualizowany. Zaletą tego jest…

• Możesz wykonywać wywołania Fetch / Axios bez konieczności zawijania ich w useEffect, aby uniknąć nieskończonych pętli
• JSX automatycznie skompiluje się do wywołań createEffect, dlatego zaktualizują się po aktualizacji stanu.

Zaletą tego jest to, że aktualizacje są bardziej szczegółowe, co sprawia, że ​​koszt wirtualnej domeny jest niepotrzebny (tylko kod zależny od zaktualizowanych danych zmieni się bez konieczności przeprowadzania jakichkolwiek porównań).

Podsumowanie

Solid zachowuje to, co najlepsze w składni React, ale także wykorzystuje podejście Svelte do zwiększania wydajności. Nie zdziwiłbym się, gdyby SolidJS rozwijał się w tym samym duchu, co Framework, jak Svelte i React!