SolidJS の勘どころ

SolidJS を軽く触ってみました.

試しに todo アプリを作ってみたりしましたが, とても良い感じです.

（新しい言語やフレームワークを試すときはだいたい todo アプリ的なものを作ったりしている）

個人的に今後は React ではなく SolidJS 使おうかなというくらいには良い印象でした.

一方, React っぽいみたい目をしていて, 実際は全くの別物なので React に慣れ親しんだユーザーはつまづくカモなポイントがちらほらあります.

というわけで, 主にReact ユーザー向けに入門時の勘どころリストを書いてみます.

React ユーザー向け勘どころリスト

• Reactのことは一旦すべて忘れましょう. 考え方や思想は根本的に別物です.
• 関数コンポーネントは一回しか実行されません.
• state(signalやstore)が更新されても関数コンポーネントは再実行されません.
• stateのsetterを呼び出した次の行ではすでに state の値は更新されています.
• stateの更新時, コンポーネント全体ではなく対応するdom要素のみが再レンダリングされます.
• JSXの中でリアクティブな値(stateやpropsなど)にアクセスすることで, dom要素とリアクティブな値が紐付きます.
• リアクティブな値を他の変数に再代入して使った場合, その再代入後の変数はリアクティブではないことに注意しましょう.
• 特に分割代入に気をつけましょう.
• リアクティビティを保ちたかったら再代入・分割代入せずにJSXに値を渡してください. (特にReactのノリでpropsを分割代入しないように)
• createXXX は hooks ではないのでどこで書いてもよいです.