React 基礎(chǔ) 組件
1.創(chuàng)建的類需要在別的類中使用，則建立的時候需要添加export default?，另外return里面只能有一個節(jié)點，下圖就是一個簡單的組件
組件的創(chuàng)建
2.使用時以標(biāo)簽的形式使用，并以導(dǎo)包的方式引入進(jìn)來即可(組件的使用)
組件的使用
3.組件也可以通過參數(shù)的方式傳遞使用
以參數(shù)的方式傳遞
4.同樣的，react中也可以使用三目表達(dá)式
三目表達(dá)式
5.組件中參數(shù)傳遞不在需要單引號，直接{}就可以
參數(shù)傳遞
5.組件中注釋，當(dāng)使用 “//注釋”時html上也會顯示這個注釋內(nèi)容，但頁面上并不會顯示，當(dāng)使用“{/* 注釋 */}”注釋時，html和頁面都不會顯示這個注釋。
6.組件的生命周期
React生命周期
componentWillMount()：頁面將要加載之前會先走這個函數(shù)，可以在這個函數(shù)里面加載一些頁面的數(shù)據(jù)，以及實現(xiàn)一些邏輯等等。
componentDidMount()：頁面加載之后會走這個函數(shù)。
React屬性與事件
1.constructor構(gòu)造方法：?
????????????在一個類中只能有一個名為 “constructor” 的特殊方法。 一個類中出現(xiàn)多次構(gòu)造函數(shù) (constructor)方法將會拋出一個?SyntaxError?錯誤。在一個構(gòu)造方法中可以使用super關(guān)鍵字來調(diào)用一個父類的構(gòu)造方法。如果沒有顯式指定構(gòu)造方法，則會添加默認(rèn)的 constructor 方法。如果不指定一個構(gòu)造函數(shù)(constructor)方法, 則使用一個默認(rèn)的構(gòu)造函數(shù)(constructor)。
constructor解釋
React中使用constructor構(gòu)造方法更改 state 的時候會立即引起值得變更，但不會刷新整個頁面，效率非常的高，而且不會影響其他組件的state的值，只影響本身。state對于模塊來說屬于自身的屬性。
4秒之后更改頁面的值，會刷新頁面，但是不會刷新整個頁面的值，只會恒愛state中的值
2.React之props屬性：組件之間進(jìn)行傳值，對于模塊屬于外來的屬性
向BodyIndex中傳值
BodyIndex中使用props接受值
3.事件與數(shù)據(jù)的雙向綁定
?????事件的綁定
????點擊"提交"按鈕之后年齡會由原來20，改為50
點擊更改年齡
當(dāng)然也可以在綁定的時候傳一個值過去，這樣點擊"提交"按鈕之后年齡會由原來的20變?yōu)?9
點擊傳值
子頁面向父頁面?zhèn)鬟f參數(shù)的方法
在子頁面中通過調(diào)用父頁面?zhèn)鬟^來的事件 props 進(jìn)行組件的參數(shù)傳遞，通過onChange獲取子頁面輸入的值，父組件中綁定并接受子組件傳過來的值，并更改父組件中的值。
時隨著輸入框的輸入值實時觸發(fā) onChange 事件，從而實時更新 p 中的值
子類組件
父類組件
4.可復(fù)用組件
當(dāng)父組件給子組件傳的值不是一個數(shù)字時，則會報錯，子組件中添加了一個約束，使子組件只接收所有父組件傳過來的數(shù)字類型，其他都不接收。
父組件
子組件中規(guī)定userid的類型為數(shù)字類型??
如果number后面加一個?".isRequired "則父組件引用子組件必須要傳這個參數(shù)，如果添加上
"BodyIndex.defaultProps = defaultProps; "這個約束，那么當(dāng)父組件沒有傳username這個值時則會給他一個默認(rèn)值，就是上圖中的 defaultProps。
如果說父傳子屬性 子在傳子屬性 書寫方法 "{...this.props} id={4}","...this.props"是拿到所有的參數(shù)，"id={4}"是又另外傳了一個值過去。
5.組件的refs
當(dāng)使用ref時，使用 this.refs.submitButton.style.color = 'red' 可以直接更改input中的顏色
ref
Refs 是訪問到組件內(nèi)部 DOM 節(jié)點唯一可靠的方法
Refs 會自動摧毀對子組件的引用
不要在 render 或 render 之前對 Refs 進(jìn)行調(diào)用
不要濫用 Refs
React 樣式
1.內(nèi)聯(lián)樣式
其中的header只會影響本類，不會對其他的類進(jìn)行污染
樣式需要使用駝峰寫法屬性也是需要引起來，如果樣式要使用html中的則也需要用引號引起來
注意標(biāo)簽中給他一個class屬性需要改為className否則會與react中的class沖突
缺點是動畫、偽類（hover）等不能使用
內(nèi)聯(lián)樣式
2.內(nèi)聯(lián)樣式中的表達(dá)式
當(dāng)前 padding-top 和 paddingBottom 的高度為15px，當(dāng)觸發(fā)了點擊事件之后會給minHeader的值取反，這樣他們的值為3px，樣式會實時更改，不用刷新頁面
實時改變樣式
3.CSS 模塊化
css文件可以以require的方式導(dǎo)入進(jìn)來，在下面直引用即可
這里可以使用 class 是因為使用了一個插件?"babel-plugin-react-html-attrs"
footer.css只會影響引入的類，不會影響其他的類
使用的插件
css模塊化
React Router 路由
1.Router 基礎(chǔ)
首先需要引入路由，并把程序的入口改為<Root/>
其中的 "/" 和 "list" 是平級的，都是一個單獨的頁面
而其中的 "details" 為嵌套路由，"details"不是一個單獨的頁面，他會顯示在他所嵌套的路由的頁面上，而在路由上只要簡單的使用this.props.children即可引用子路由
路由
引用子路由
2.參數(shù)傳遞
參數(shù)傳遞時可以通過 "list/123" 寫死，也可以通過 "list/:id" 的方式占位，頁面url上拼上就可以
而在對應(yīng)的頁面上只需要使用 "this.props.params.id" 就可以接收到url上的值
參數(shù)傳遞
頁面接收參數(shù)
