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