背景
本項目是采用 `React+redux` 實現的知乎日報的App，所有API均來自網絡（若涉及侵權，請及時聯系我刪除）
運行
- 獲取 `git clone https://github.com/Hancoson/react-redux-demo.git`
- 安裝 `npm install(yarn)`
- 啟動 `npm start`
- 構建 `npm build`
對應技術
- 底層技術 `React+redux+react-router`
- 編碼規范 `ES6`
- 構建工具 `webpack`
- UI `Antd`
- API 采用Yahoo跨域訪問代理
- 其他工具技術 `React-hot-load`，`babel`，`webpack-dev-server`等
技術實現
react
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
state & props
- `props`（屬性）和`state`（狀態）的改變都會觸發`render`函數來更新界面；
- 屬性(`props`)是由父組件傳遞給子組件的；
- 狀態(`state`)是組件內部維護的數據，當狀態發生變化的同時，組件也會進行更新。 當狀態發生轉換時會觸發不同的鉤子函數，從而讓開發者有機會做出相應操作。
生命周期
//初始化階段
getDefaultPropos? ? ? //只調用一次，實力之間共享引用
getInitialState? ? ? //初始化每個實例特有的狀態
componentWillMount? ? //render之前最后一次修改狀態的機會
render? ? ? ? ? ? ? ? //只能訪問this.props和this.state，只有一個頂層組件，不允許修改狀態和DOM輸出
componentDidMount? ? //成功render并渲染完成真實DOM后觸發，可以修改DOM
//運行中階段
componentWillReceiveProps? //父組件修改屬性觸發，可以修改新屬性，修改狀態
shouldComponentUpdate? ? ? //返回false會阻止render調用
componentWillUpeate? ? ? ? //不能修改屬性和狀態
render? ? ? ? ? ? ? ? ? ? //只能訪問this.props和this.state，只有一個頂層組件，不允許修改狀態和DOM輸出
componentDidUpdate? ? ? ? //可以修改DOM
//銷毀階段
componentWillUnMount? ? //在刪除組件之前進行清理操作，比如計時器和事件監聽器。
組件化的開發思路
所謂組件，即封裝起來的具有獨立功能的UI部件
- React推薦以組件的方式去重新思考UI構成，將UI上每一個功能相對獨立的模塊定義成組件， 然后將小的組件通過組合或者嵌套的方式構成大的組件，最終完成整體UI的構建。
- 如果說MVC的思想讓你做到視圖-數據-控制器的分離，那么組件化的思考方式則是帶來了UI功能模塊之間的分離。
redux
先簡單說一下 `redux` 和` react` 是怎么配合的。`react-redux` 提供了`connect`和`Provider`兩個好基友，它們一個將組件與`redux`關聯起來，一個將`store`傳給組件。組件通過`dispatch`發出`action`，`store`根據`action`的`type`屬性調用對應的`reducer`并傳入`state`和這個`action`，`reducer`對`state`進行處理并返回一個新的`state`放入`store`，`connect`監聽到`store`發生變化，調用`setState`更新組件，此時組件的`props`也就跟著變化。
核心代碼
app入口文件
store
reducer
總結
因為整個項目組我是第一個用react+redux做項目的，遇到問題只能自己解決，如果不是在github上下載了別人的代碼，我覺得自己是不可能按時完成任務的，它讓我少走了很多彎路。寫一個已經被寫爛的todo demo和寫一個完整的項目完全是兩回事，所以我非常欣賞和感謝那些愿意分享自己代碼的人，也會將自己的代碼分享出來，希望對大家有幫助。
最后附上github地址https://github.com/Hancoson/react-redux-demo ，喜歡的麻煩幫我點個star,我會分享更多干貨。
原文地址：http://www.vsoui.com/2017/01/13/build-a-react-redux-app/
