Lichin

contact: [email protected]

I am

這個三月我去找了實習,在只會html/css的能力下所能找到的機會實在有限。正好這時看到有家新創公司正在徵 React.js 相關技能的實習生,就趁著這個機會來學習一下新技術。


# 學習資源

  1. 官方 React.js 有詳細的demo跟步驟解釋,一步步跟著做就能暸解他獨特的理念。
  2. React.js的應用小範例。

# 心得分享

虛擬DOM

        React.js 是一套顛覆以往想法的前端UI框架。Facebook當初推動時,就是為了解決使用者複雜的元素操作,提高網頁效率。在這裡 React.js 引入 VirtualDOM 的機制。
        當一個UI有資料變動而牽扯到畫面改變更新時,React.js 會根據新的狀態重新繪製一份 VirtualDOM,並且比對新舊差異,不同的差異之處才會真正的更新到 DOM ,反應在使用者的網頁上。


組件(Component)化的思維

         Virtual DOM 不僅僅帶來速度上的便利,也使得UI有了可組合性。 Virtual DOM 的機制讓每個 UI 都視為一個個的組件,而每一個組件都有其要呈現的樣貌以及事件控制,經過封裝與組合最後有系統的成為完整的大UI。
        這有別於MVC的前端思維,將 表現-數據-控制器 三項分離,開發者必須去設計每個 UI 相互的影響,在大型專案裡,這會變得十分錯綜複雜,以及難以維護。 React.js 則開創了新的想法, 開發者僅僅需要維護好每個組件,就能不斷擴充網頁。


# 練習

藉由兩個按鈕以及一個顯示分數說明 React.js 的特性,定義好每個組件的事件以及呈現,就能實作出功能簡單的分數版。
更多 React.js 的學習心得會在下次與大家分享喔~

See the Pen Plus Minus button with React by lichin-lin (@lichin-lin) on CodePen.

# 參考

  1. REACT FOR DESIGNERS
  2. Flux-單向資料流介紹
  3. Getting started with Redux


blog comments powered by Disqus

Published

10 March 2016

Tags

title

yo! trying to alert