about 3 years ago

碰了一陣子React,大致整理一些如何學習和開發的思路出來,供作參考之用。

準備知識

對初期接觸的朋友來說,基本上其實知道這些東西是做什麼用,然後會用就好。
之後根據你的需求再去深入研究它的各種用法。
webpack
https://webpack.github.io/

babel
https://babeljs.io/

了解一些js es6和es7的語法 (es7可以只需知道decorators)
http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

React
1.了解props和state的差別
2.了解載入元件的順序 (componentDidMount那些)
3.了解開發時你要如何思考。
英文:https://facebook.github.io/react/docs/thinking-in-react.html
中文:http://reactjs.cn/react/docs/thinking-in-react.html
重點就是

  • 拆分界面
  • 處理成靜態版
  • 了解哪些東西是state
  • 知道state應該要放在哪裡
  • 添加反向數據流(其實就是讓user的action可以導致畫面和資料的變化,這邊我們是用redux來處理)

Redux
了解action reducer store等等部分,這部分處理好之後,在開發新功能時其實就只要
新增action和reducer的相關程式就好。

如何有邏輯的分層?

我是這樣分的,供做為參考
Root:管理Provider和Router,包含Page.
Page:一個頁面,可能包含一個Container或是多個Container
Container:一個完整可運作的單位,包含多個Component,每個Component有比較緊密的資料聯結。
Component:在你拆分界面時所拆出來的組件。

透過Redux來做開發時

每個Container有屬於自已的reducer和action(儘量寫在一起)
透過bindActionCreators,生成的action從Container注入到Component

範例

https://github.com/motephyr/react-redux-socketio-slack-customer-service
透過各種方式(如slack)加上socketio去做你的線上客服系統,界面上其實還要再調整,不過做為範例用。
主要運作的部分是MessageBoxComponent這個組件,其他有些不相關的程式碼最近再做一次整理。

示意圖


← 加速Rails效能66%的秘訣 - Rails 快取完全指南(摘要) React Redux作用流程 →
 
comments powered by Disqus