Halogen Hooks
Halogen上でReact Hooks的なことをする
嬉しさはReact Hooksの嬉しさとだいたい同じ
ただ、従来のHalogen Componentが難しすぎるのでReactよりも嬉しさが増す
個々のComponent内の状態やロジックの再利用が簡単にでき、
Component自体の定義の仕方も楽になる
React Hooksを知っているとかなりスムーズに導入できる
命名やHalgeonのBuilt-in Hooksなどはほぼ同じ
ReactHooksを知らないと少し難しいかもしれないが、それでも従来のHalogen Componentよりは学習コストめっちゃ低い
もっと推していくべきでは？という気がする
公式が作っているのに、公式があまり推していないのが謎
簡単な使用例
最初に読むと良い
解説と実装がある
便利hooks集
Built-in Hooks ref
これはなに #??
>#WIP
型で、内部で使用するhookの型を列挙する
purs(hs)import Halogen.Hooks (type (<>), UseEffect, UseState)
type UseWindowWidth = UseState (Maybe Int) <> UseEffect <> Hooks.Pureこれって順序関係ある #??
hook自体の型
purs(hs)useWindowWidth :: ∀ m
. MonadAff m
=> Hook m UseWindowWidth (Maybe Int)内部で使用するhookの型と
返り値の型
などを指定する
react hooksと同様で、呼び出す順序は毎回同じでないといけない
違うところは、順序が異なるような書き方をした場合、Halogen hooksでは「コンパイルエラー」が得られる
型で検証されている
内部実装のどこでそれをやっているのか知りたい #??
その例を見てみたい #??
Hooks.component に渡す関数の2つの引数はなに #??直接的にはhookと関係ないが
/\ はnestしたtupleを作る関数通常はHalogenMで書くものを、hooks内ではHookMで書く
HalgeonM内でできることは何でもできる
reactのように
[hoge, setHoge] という組をcustom hookから返したいがどうすればいい？ /\ を使えばいいpurs(hs)useToggle :: ∀ m. Hook m UseToggle (Tuple Boolean (HookM _ Unit))
useToggle = Hooks.wrap hook
where
hook :: Hook m UseToggle' _
hook = Hooks.do
flg /\ flgId <- Hooks.useState false
let
update :: HookM _ Unit
update = Hooks.modify_ flgId not
Hooks.pure $ flg /\ update利用時も
purs(hs) flg /\ setFlg <- useToggle