ReactとSolidの違いを詳しく見てみる

JSXの元祖であるReactと、JSXから派生しつつReactと異なり仮想DOMを使わないSolid.jsの違いを見てみました。

React開発者がSolid.jsに触れる場合を想定して違いを見ると、基本的には次のような違いがあります。

• Reactのフック関数はコンポーネント関数内でのみ使用できますが、SolidJSの状態管理関数は独立した状態管理技術のように、呼び出しに制約がありません。
• Reactの副作用関数であるuseEffect関数は、1つの関数で副作用時の処理と解除時の処理までまとめて提供でき、影響を受ける状態を手動で指定することもできますが、Solid.jsの副作用関数であるcreateEffectはSvelteのように本文で明示した状態管理の影響を受け、影響を受ける状態を手動で渡さず、戻り関数も提供しません。その代わり、1つの状態管理ライフサイクル環境を提供するため、onCleanupによる解除関数を使えます。
• 状態スコープ管理については、Reactと使い方の違いはありません。
• 動的コンポーネントや条件分岐、反復処理について、Reactは状態変更時に本文が再作成される特性により、JSロジックをそのまま使って容易に対応できますが、Solidは本文が維持されるため、提供される組み込みコンポーネントで解決できます。
• Reactのlazyおよび<Suspense>コンポーネントはSolid.jsでも提供されています。
• SolidはReactと異なり、非同期リアクティビティを考慮した状態管理ユーティリティ関数を提供します。
• ReactのrefとSolid.jsのrefの使い方は似ていますが、Reactで主に参照用として使うuseRefのような専用関数は、Solid.jsでは単純にlet変数で扱えます。
• Solid.jsはSvelteのように、バニラJSのライフサイクルを管理するuseアクションの特性を提供します。
• Reactのプロパティ（Props）は、分割代入して単独で使っても、プロパティ変更時に本文が再作成されるため問題なく使えますが、この方法をSolid.jsで使うとリアクティブに動作しないため、分割代入による単独プロパティの活用はできません。オブジェクト形式のまま使うか、オブジェクトの分解やマージを提供するユーティリティ関数（splitPropsなど）で分解し、引き続きオブジェクトのように扱う必要があります。

[firea32]

最大の違いは、useState と useSignal の違いですね。データがバインディングされる仕組みが見えにくくて、デバッグにとても苦労した記憶があります。