Mithril 體驗
Intro
Mithril 是個輕量的javascript library,相較於react, vue使用起來更加簡單,官方文檔也算是寫的簡單易懂,首先來個最簡單的示範
1 |
|
這個在mithril會相當於下面語法
1 |
|
m()會創造virtual HTML elements, m.render()將會把virtual dom轉換成real dom,這基本上和react是有著差不多的性質的,但是通常會使用component的方式,component就是一個javascript notation object,就是一個plain object,render會去抓view property,下面示範
1 |
|
像上面使用m.mount
不用自己在額外呼叫m.render
這個方法,另外m.mount
參數是接受component,m.render
則是需要vnode。
1 |
|
上面這範例值得注意的地方是,m.withAttr
這個方法,他在input onchange時,會把其當下value傳入function裡面,所以你在執行範例會看到就算你切換掉input時,他裡面得值會依然保留,因為他在他被毀掉時之前就把值存起來了,下一次被創造就使用它,你可以試試看把onchange那行砍掉,在試著切換掉input,是不是永遠一旦切換回來input裡面的值都是default。
接著來看看呼叫api,並且得到回傳值後,rerender
1 |
|
api呼叫完後,畫面會更新主要是因為,m.request
結束後會呼叫redraw,到目前為止其實大致上概念都跟react小像,接下來回頭從整個mithril架構來開始觀看。
Structure
其實也不該說是架構,應該要說是特性吧,畢竟他也沒有強制說要你使用哪種寫法,寫起來十分自由呢,官方文檔的key concepts
那邊大概列了下面幾項
- Vnodes
- Components
- Lifecycle method
- Keys
- Autoredraw system
Vnodes
就是指virtual dom,這邊效率會好的重點是,dom的修改所花費的效能,其實不如直接重新創造還比較好,當然mithril自己說他有改良virtual dom演算法讓他效率更高這邊,這邊我就沒特別往裡面看了,畢竟演算法不是目前要注意的重點
vnode types
- Element
- Fragment
- Text
- Trusted HTML
- Component
Components
如同前面所用到的,就像下面示範的
1 |
|
另外他跟react一樣也是擁有所謂的lifecycle,畢竟就是一個創造破壞dom的概念我想有lifecycle也是很正常吧~
Lifecycle methods
Keys
是一門技術用來將序列節點裡面的dom元素重新定序,並且將特定資料項目對應到相對應的dom元素序列,簡單的說這個keys就是用來讓virtual dom技術可以知道什麼資料對應哪個virtual dom元素。
就拿官網的例子來看,
1 |
|
那麼今天people變成 [{id:2, name:'god'}]
,render就會變成 <button>god</button>
,那麼對於virtual dom演算,他會不知道要怎麼辦,因為有兩種可能,一個是第二的button被刪掉或是第一個button被刪掉,然後再改變其text的值,然後就會發生可怕的事,他自有自己的演算法去決定要怎麼下去,但是萬一今天你的button上面有綁事件怎辦? 你無法確定哪個button是被留下來的,就會產生錯誤,因此這也是為啥要有keys的原因,所以上面應該要修改成如下,
1 |
|
Autoredraw system
其實就是rerender的機制,在m.mount
, m.route
這兩個上面有相關機制存在,m.render
沒有,以component為例,
1 |
|
m.request呼叫完畢也是會造成rerender,跟上面一樣他也有設定可以讓他不redraw
1 |
|
最後route change也會造成redraw。
To sum up
整體而言,我覺得是可以嘗試一下這個library,因為他的自由性,個人目前有意思想把之前用angularjs寫的專案改成用這套寫寫看,不用react是因為,相對起來這套需要變動的地方比較少,他不像react通常還要搭配一些bundle tool還有架構性的framework才會比較完整,mithril js就是一個小而巧的library,可能也可以算是framework了,之後等我試用了一段時間後,有更多心得會再另外寫blog。
Reference
一些靈感和內容來自於下面部落格參考,寫得很詳盡清晰