ほぼ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])

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

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

下記の例は先述の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をチェインする
サーバーサイドレンダリング