序言
市場上開發項目的前端主流技術框架是 react ，但說實在的，有很多的前端開發者對 react 的整個生態並不熟悉，停留在能用，能開發，能上線的水平。但這些只是開發者的業務水平，並不代表個人技術水平，而個人水平的高低大致取決於對 react 的整個生態有一個全面的瞭解（此處所謂的瞭解並不是知道有這些東西，而是理解了這些東西在整個項目中發揮的作用，甚至在項目中的可拓展性，一旦發現問題，能迅速準確的定位問題並解決）。所以該博客的最大目的就是讓大家全面理解 react 生態
react 生態（也稱之爲全家桶）：React + React-Router + Redux + Axios + Babel + Webpack
下面逐一對各個工具進行一個深入瞭解
React
1.JSX 語法
一句話概括就是：All in js 。但偶爾也需要注意下它的渲染方式，比如你寫的一個函數返回的值是一對標籤的話，那麼最好在這對標籤外層加一對小括號，而且最外層只能存在一對標籤，不允許存在同級標籤。
2.導入方式
不管是在組件頁面或者組件內導入方法、變量、依賴、工具和組件等，都可以使用以下格式
import xxx from '../../xxx/xxx'
3.生命週期
componentWillMount：在渲染前調用，組件出現前就是dom還沒有渲染到html文檔裏面。
componentDidMount：在第一次渲染後調用，只在客戶端。之後組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)。
componentWillReceiveProps(object nextProps)：在組件接收到一個新的 prop (更新後)時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate(object nextProps, object nextState)：返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。可以在你確認不需要更新組件時使用。
componentWillUpdate(object nextProps, object nextState)：在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。
componentDidUpdate(object nextProps, object nextState)：在組件完成更新後立即調用。在初始化時不會被調用。
componentWillUnmount：在組件從 DOM 中移除之前立刻被調用。
4.組件傳值方式
①父 -> 子：通過 props 屬性傳值
②子 -> 父：通過 emit 事件（回調函數）傳值（這裏的事件函數其實也是從父組件通過 props 屬性綁定函數後傳給子組件的）
函數傳值代碼示例：
父組件部分代碼：
render(){
const searchFormProps = {
form: this.props.form,
search: this.search // 該search方法已在父組件裏聲明
};
return(
<div>
<SearchForm {...searchFormProps}></SearchForm> {/*SearchForm爲子組件*/}
</div>
);
}
子組件部分代碼：
return (
<div>
<Form>
<Row>
<Col>
<Button onClick={this.props.search}>查詢
</Button>
</Col>
</Row>
</Form>
</div>
);
SearchForm.propTypes = {
export: PropTypes.func,
form: PropTypes.object.isRequired
};
當點擊查詢的時候，觸發的是父組件裏的 search 函數，然後通過傳參或者在 search 函數裏做數據處理，再通過setState方法進行修改父組件內的state值即可
③同級組件間的值傳遞：A組件通過action事件將值修改，store（也就是reducer）將值更新後，B組件再通過 props 從store取值，詳細情況在介紹 redux 的時候說明
5.state
state是當前組件的內部狀態，只有在當前視圖裏面用到的狀態，才需要放到state裏面去。值得注意的是setState是異步的，原因是react內部需要對setState做優化，不是state變了立刻去更新視圖，而是攔截一部分state的改變，等到合適的時機再去更新視圖。
6.PropTypes
用於檢測組件接收數據的類型，即在多人開發時，當被人使用自己定義的組件時，有可能出現類型傳錯的情況，而在自己的組件上加上prop-types，可以對父組件傳來的props進行檢查，假如父組件中想傳遞的是字符串類型‘3’，而傳遞了一個數字類型3，如果沒有類型檢查系統不會給與提示，但是有了類型檢查以後，在控制檯會給你一個類型傳遞錯誤的提示。另外有的時候某個屬性值並不是一直都有的（如4中的export），有的時候只有特定場景下才有，那麼isRequired屬性則可不要
7.mapStateToProps、mapDispatchToProps和connect
這三者的用途總的來說是對 redux 的一個實例解釋，我們知道redux = action + store(整個應用的唯一數據源) + reducer ，這相當於是它的工作流程，所以mapDispatchToProps負責 action 部分，mapStateToProps負責 reducer 部分，而connect則負責把action和reducer綁定在對應的組件上，最直觀的表現形式如下：
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(componentName));
以上七個部分可表徵着每個 react 組件或者頁面的基本結構，可拓展的還有表單、獲取真實dom節點，具體可查閱
鏈接： http://www.ruanyifeng.com/blog/2015/03/react.html
React-Router
react 路由的作用是嚮應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步，總的來說有三種使用方式，可供組件跳轉。
①：Route組件
import { Router, Route, hashHistory } from 'react-router';
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="accounts" component={Accounts}/>
<Route path="statements" component={Statements}/>
</Route>
</Router>
②：Link組件
Link 組件用於取代<a>元素，生成一個鏈接，允許用戶點擊後跳轉到另一個路由。它基本上就是<a>元素的React 版本，可以接收Router的狀態。
<div>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</div>
③： JS語法
用戶交互之後會利用JS 語句跳轉到另外組件，這個時候需要注意的是跳轉用法，不同的react 版本它對應的js 語法是不一樣的。
react 2.0版本：
import { hashHistory, Route } from "react-router";
function () {
...
hashHistory.push(path) // path後面可以攜帶參數
}
react 3.0版本：
import { Route } from "react-router-dom";
function () {
...
this.props.history.push(path); // path後面可以帶參數
}
更多關於react-router的學習請訪問：http://www.ruanyifeng.com/blog/2016/05/react_router.html
Redux
個人覺得這篇文章寫的很是通俗易懂：Redux實現原理解析及應用
Axios
推薦這篇文章理解：一步一步解析Axios源碼，從入門到原理
Babel
又來放鏈接了：深入理解Babel原理及其使用
Webpack
繼續：webpack打包原理
全家桶總結
這是對 react 項目的一些基礎學習，瞭解了基礎之後，開發項目就會迅捷很多，至少讓你不僅明白了很多問題，也知道爲什麼這麼處理的原因。另外其實更深入的學習，更深刻的體會還是得通過實戰，那麼下面就是實戰中可能遇到的一些難以理解的問題或依賴或工具等
store
store-keyMirror：爲什麼需要 KeyMirror
store-combineReducers：React+Redux之combineReducers方法
store-applyMiddleware：中間件與異步操作
參考文章
【1】前端技術:React詳解
【3】React 組件生命週期
