rumを触ってみる

• ほぼReadmeの翻訳
• [rum "0.10.8"]を使用している

特徴

• ClojureScriptではreactラッパーとして動作する
• Clojureではhiccupレンダラーとして動作する
  • なのでサーバーサイドレンダリングがやりやすいらしい
• ミックスインを利用することで柔軟にコンポーネントを記述することができる

インストール

[rum "0.10.8"]を:dependenciesに追加する

コンポーネントの定義

いわゆるHiccup Syntaxを利用して記述する

(require [rum.core :as rum])

(rum/defc label [text]
  [:div {:class "label"} text])

コンポーネントのレンダリング

1. コンポーネントのインスタンスを作る
2. インスタンスをマウントする

下記の例は先述のlabelコンポーネントを適当なdom-nodeにマウントする

(rum/mount (label "foo") dom-node)

コンポーネントの再描画

手動

単純にmountを再度呼ぶ。自分で完全に再描画のタイミングをコントロールすることが可能

reactiveミックスインで自動的に

reagentはreagent.core/atomの変更を検知して自動的に再描画をする機能があるが、
rumでは普通のatomで同じ様な記述ができる。

• < rum/reactiveのミックスインを指定する
• rum/reactで参照を監視する

(def c (atom 0))
(rum/defc label < rum/reactive [text]
  [:div {:class "label"} text
   [:button {:on-click #(swap! c inc)} (rum/react c)]])

localミックスイン

コンポーネントの内部だけで利用される状態がある場合はlocalミックスインが利用できる

• defcではなくdefcsを使う
  • こちらはコンポーネントの内部の状態が第一引数として渡されるのでアクセスをすることが可能
• localミックスインは< (rum/local <初期値> <格納するキー>)の様に使用する

(rum/defcs toggle-button < (rum/local true :some-random-key)
  [state]
  [:button {:on-click #(swap! (:some-random-key state) not)}
   (pr-str @(:some-random-key state))])

staticミックスイン

コンポーネントの引数がイミュータブルなデータな場合、staticミックスインを利用することで無駄な再描画を避けることができる

(rum/defc bool < rum/static [bool]
  (if bool
    [:span "TRUE"]
    [:span "FALSE"]))

(rum/defcs toggle-button < (rum/local true :some-random-key)
  [state]
  [:button {:on-click #(swap! (:some-random-key state) not)}
   (bool @(:some-random-key state))])

その他高度な機能

• 自分でミックスインを定義する
• cursorで複雑な状態の一部だけを切りだす
• 複数のatomをチェインする
• サーバーサイドレンダリング