前言：自己剛剛總結的關于react的知識點，比較簡單，大家可以粗略看看。
一：關于react的一些知識點
1，Jsx
所有的html，css都可以寫在js中，這就是jsx的用法。
2，生命周期**
- 渲染組件的時候幾個過程
getDefaultProps
getInitialState
componentWillMount // 組件將要被加載之前的操作。如請求數據等
render
componentDidMount(一般在這個階段各種api的請求等，與redux配合的時候，可以在redux的action獲取接口數據。)
- 組件存在時候
-
componentWillReceiveProps
// 常用的用法是父組件的props改變了，需要在子組件中通過這個生命周期獲得最新的props，然后setState組建的state
shouldComponentUpdate // 組件是否要重新渲染，默認為真。
componentWillUpdate
render
componentDidUpdate
3，數據的類型驗證：PropTypes
用于驗證數據的類型是否是滿足你的需要,不過我在現有的項目中沒有特意的指定數據的propTyoe，因為這些都是前后端約定好的。
此用法如下圖 ：
這個如同vue組件里面的props中的type：Array這個一樣
![]()
image
4，路由（react-router）
這個與vue-router差不多，大家可以看文檔。
react-router的中文官網 ： 中文官網
5，父子之間的傳遞屬性
沒有使用redux，最簡單的（props與state）
-
使用redux（狀態管理）: redux中文官網 (差不多70多行代碼)
6，react中獲取真實的dom節點 【ref】
因為react與vue一樣，都是使用vitural-dom，沒有處理dom節點，從而大大提高了頁面的渲染效率。
當你想要獲取真實的dom節點的時候，可以使用ref，具體的使用，可以看阮一峰的react入門，我下面的todolist的demo里面也會涉及到。
不過在你使用無狀態組件申明組件的時候，ref在這個組件中是不能使用的。
7，webpack的使用，既grunt，gulp之后的構建工具
可以通過webpack安裝各種依賴，我使用的最爽的一個就是react-hot-loader，就是熱更新，非常好用。不過熱更新其他的工具，比如browser-sync,下面是一些文檔。
webpack中文官網 ： 中文官網
webpack的demo(阮一峰)：webpack-demo
8，react的腳手架工具create-react-app
如vue的vue-cli腳手架，create-react-app](https://github.com/facebookincubator/create-react-app)，使用以上方法的話，與vue-cli腳手架工具類似
二、學習react（我當時的學習路線）
-
第一階段：
學習之前，花費了很多時間去配置
webpack，react-router，react-hot-loader，沒有使用腳手架。 -
第二階段：
學習基礎的react語法，如下面demo中的todolist，但是不涉及到redux（統一狀態管理），這個階段學的特別快。主要是我上面列的一些知識點（jsx，組件之前數據傳遞，react-router，PropTypes），最主要的就是一個模塊化的概念，個人感覺學過vue的，理解模塊化，上手應該是蠻快的。
-
第三階段：
學習redux，當時是因為組建太多，而數據需要一層一層的傳遞進去，比較麻煩，就學了redux，講狀態統一管路，在用到的組件直接使用redux調用相應的狀態就好了。【這個學習的成本蠻高的，主要是理解，理解了之后使用起來很簡單。】
想快速上手的話，可以學習mobx，這個相對于redux更加簡單，但對大型系統的話，redux更好，如果你想快速使用redux做項目開發，可以建議使用相關的框架，我上面也提到了，阿里的ant-design-pro，具體的教程官方都有，這里需要說的一點是，這個框架是配合阿里的redux框架dva使用的。大家有興趣可以看一下。
我自己的一些總結，單單學react是不難的，難的是要和一些工具混合來用，往往這個過程的成本最高。比如使用webpack構建，redux管理狀態，redux-thunk或者redux-saga來處理異步action。
還有一個很大的趨勢就是前端變化很快，拿react-router來說，你做了一個項目，react-router@2.0.0是能完美跑起來的，但是換成了當換成了react-router@3.0.0，基本上就跑不起來了，更何況現在的react-router已經出到4.0，
相應的webpack也是這樣，當時一些開發者基于webpack1.0開發的，當webpack升到2.0的時候，webpack.config,js里面的文件要重新配置了。現在webpack已經更新到了3.0。
三、關于react的網站
1，各個官網：英語好的話，真的推薦去官網看。
2， 阮一峰的文檔：react的入門，webpack的入門，react-router
3，react的一些框架和一些輪子：
3.1 : 有贊團隊 ： zent;(也是一兩個月前剛開源的);
3.2 : 螞蟻金服：Ant-dedign , Ant-design-mobile，ant-design-pro;
3.3 : react-weui ：react-weui
3.4 : react-awesome : react-awesome
4，一個漸進的學react的demo。
里面基本上涉及到了，react入門的所有涵蓋的知識，他都是自己搭的，沒有使用腳手架工具。里面也涵蓋了webpack的一些配置，對于新手學習蠻好的。
?
四、小案列（自己前段時間寫的一些小demo，比較low，大家可以看看）
1，jquery、vue、react的todolist，最簡單的
React-todolist的代辦事項 : https://github.com/darrell0904/todolist（沒有使用redux）
Vue-todolist : https://github.com/darrell0904/todolist-vue
Jquery-todolist : https://github.com/darrell0904/todolist-jquery
2，基于ant-dedign的一個react簡單的demo
- react-news : https://github.com/darrell0904/react-news
3,基于react寫的一個簡易大眾點評的demo，里面用到了redux，mock，fetch，es6
