個人網頁改版
照慣例,好像每換一間公司就要把個人網頁改版一下,那就來改吧!
其實只是最近在看 Facebook 開源的 React,想實際動手試試比較有感覺,就拿 blog 來開刀。沒想到不開則已,一開才驚覺怎麼這麼好的概念現在才碰到,有點相見恨晚的遺憾在裡頭。原本的架構就是傳統 php 的思維,把資料檔案讀進來,分別依照左側的 Archives, Tags, Recent Comments 以及中間的正文刻出對應的 HTML DOM,然後印出來,程式碼非常之亂且難以維護。在 React 的概念下,每個區塊的資料各自分離成獨立的 API,以 AJAX 取得資料後再透過 React 把 HTML DOM 產生出來,而每次資料有變動,就概念上整個重新產生一次 HTML DOM (實際上 React 會去計算前後變動產生的 diff 再把差異的部分更新到頁面上,據說這作法參考了遊戲引擎在畫面上只更新變動的部分的概念),這樣一來整個架構就簡單清楚多了。以 blog 為例,只要有新的 comment 送出,就重新發一次 AJAX 取得新的中間正文資料更新 state,React 立刻會驅動 render 重新產生對應的 HTML DOM,這樣新的 comment 就會立即顯示在頁面上。這時有個新問題產生,如果要同時更新左側的 Recent Comments 區塊呢?官方的作法是用 Flux 的架構,不過目前還不太懂 Flux 區分 Action, Dispatcher, Store, View 背後的動機,所以就用簡單的 event emitter 來通知 Recent Comment 去抓新資料就解決了。這樣的機制如果要用傳統的 php 思維來做絕對是讓程式更複雜更難以維護,但透過 React 就是一個 event emitter 的工作而已。
結論就是,React 真是個偉大的發明。敬禮!
跑步姿勢組合,來源:《跑步,該怎麼跑?(Pose Method of Running)》。
