Reactは、最新のWeb開発における最大のフロントエンドJavascriptフレームワークです。ただし、Svelteの人気はここ数年着実に高まっています。Svelteが特別な理由。

• 構文を学ぶのはとても簡単
• フレームワークをブラウザに出荷する代わりに、コードは標準のjsにコンパイルされるため、バンドルサイズが大幅に小さくなり、コードが非常に高速になります。

SolidJSはフロントエンドUIフレームワークであり、その構文はReactに非常に似ていますが、Svelteのような最新のJavaScriptにコンパイルされているため、Svelteの速度とバンドルサイズを取得できますが、使い慣れたReact構文を使用できます。

SolidJSプロジェクトの設定

次のコマンドを実行して、新しいプロジェクトを生成します…

npm init solid app ProjectName

またはtypescriptの場合

npm init solid app-ts ProjectName

同じこと

• 生成されたプロジェクトのファイル構造は、create-react-appのように感じるはずです。
• JSXは引き続きJSXのように機能します

したがって、Reactでは通常useStateフックを使用して状態変数を生成しますが、createSignal関数を使用することを除いて、プロセスはSolidJSでもほぼ同じように機能します。

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;

ライフサイクルとcreateEffect

ここで、Thinking inSolidはReactでの考え方が大きく異なります。Reactでは、コンポーネント全体が、状態が更新されるたびに再実行される関数であり、コンポーネントの関数本体で関数呼び出しの状態を変更するときに無限ループが可能になります。Reactでは、これに対する解決策は、この種のコードをuseEffectフックを使用して独自のクロージャーに移動し、コンポーネント関数のすべてのレンダリングで必要なときに実行することです。

Solidは仮想DOMを使用せず、状態の更新時にコンポーネント関数を再度実行しません。代わりに、リアクティブコードはcreateEffect呼び出しでラップされ、その中のシグナルが更新されると関数が再実行されます。これの利点は…

• 無限ループを回避するために、useEffectでラップすることなくFetch / Axios呼び出しを行うことができます
• JSXは自動的にcreateEffect呼び出しにコンパイルされるため、状態が更新されると更新されます。

これの良いところは、更新がよりきめ細かくなり、仮想domの費用が不要になることです（更新されたデータに依存するコードのみが、比較を実行せずに変更されます）。

結論

Solidは、React構文の優れた点を保持しているだけでなく、Svelteのパフォーマンス向上アプローチも利用しています。SolidJSがSvelteやReactのようなフレームワークと同じように成長するのを見ても驚かないでしょう！