先說明下為什麽說好每天一更，周五周六周日都沒有更新。因為在周五的時候，上司主動找我談了轉正後的工資4-4.5K。
本來想好是6K的，後來打聽了一圈公司的小夥伴，都是5-5.5，我就把自己定到了5K。
萬萬沒想到，只有4-4.5， 估計是4.5然後扣掉各種以後，就4K。
也不是說不能活，就是覺得和周圍的小夥伴相比，顯得有點低。所以心情有點低落。
這兩天也都在玩，就當放松心情了。
自己也去網上找了一圈，發現最近工作機會有點少，加上在公司裏搞得雜七雜八，沒有什麽是精通的了，所以還是先好好待著吧。
既然選擇待著，就好好幹活吧~ 下班自己再學點其他的，增加就業機會。
然後今天早上依然不太想去上班，就又請假了一天。不過發現在家也沒事幹，還是學習了React。
因為公司項目未來即將要用到。所以先學習一下。稍後分享就分享react方面的知識。

# react的入門
react就是一個js框架，它采取組件化的結構，實現頁面局部的快速加載，而不用每次都刷新整個頁面。
簡單的說，就是 很好用！
而且適配pc和移動端。一套代碼，多地方使用，提升效率。

1. 首先安裝npm。
2. `npm init`
2. 使用npm安裝webpack（這裏的react都是使用webpack來管理的，公司是使用gulp來管理，雖然還沒深入研究。明天去研究研究。）
3. `npm install --save react react-dom`
4. 基本就可以開始了，這裏不講文件的分布，就講下react的大致寫法。

1. `import React from ‘react‘ //(`首先是引用react)
2.

export default class BodyIndex extends React.Components
render(){
return(
<h1>我是body部分</h1>
)
}

// 這裏是寫一個class部分（ES6的寫法，由於越來越流行ES6，所以都采取ES6的寫法），繼承React的Components
// 裏面的render是react的語法，即準備返回什麽，return裏面是要返回到頁面上的內容。
3. 在return中也難免會有一些註釋，如果直接使用//來註釋，則會造成錯誤，所以要使用{/* ... */}來註釋。
4. 在BodyIndex的父級js中，如果要使用BodyIndex，則需要使用`import BodyIndex from ‘bodyIndex的文件路徑‘`
5. 然後在return中 直接使用`<BodyIndex />`即可完美引用,當然前提bodyindex需要export出去。
6. react有幾個加載狀態`componentsDidMount`,`componentsBeforeMount`都可以在這裏面設置自己需要的事件。
7. 當然，除了幾個狀態以外，react也有獨立的state和props。state即狀態，可以在一開始的時候設置`this.state = {id: 111}`
然後在使用的時候，如果要改變state可以使用`this.setState({id: 222})`重新賦值來覆蓋掉原來的即可。
8. props是父子頁面之間互相傳遞的方式。在父頁面中可以使用`<BodyIndex userid={123}`來將userid=123傳給bodyindex頁面，
然後在bodyIndex的頁面中，使用this.props.userid就能來獲取父頁面發來的數據了。
9. 在當前頁面中寫function以後，如果在比如input-button的標簽中調用，需要書寫如下`onClick={this.functionName.bind(this,[args])}`的形式，
其中args為可選，如果填寫會發送給function當做參數，這是ES6的語法，需要記住。
10. 從父頁面傳來的數據在使用前可以先進行驗證，這些都是react裏面有現成方法的，比如userid為數字
`BodyIndex.propTypes = {userid : React.PropTypes.number}`,這句話寫在bodyindex頁面即可進行驗證。
11. 從父頁面傳來的數據如果沒有填寫，自己頁面填寫了`this.props.userid`也不會報錯，只是輸出空數據。
當然，我們也可以寫一些默認的值來避免這些尷尬，如果有傳過來，就使用傳過來的值，沒有就使用默認值
`const defaultPrps = {userid : 001}; BodyIndex.defaultProps = defaultProps`.
12. 如果想從父頁面(A)向孫子頁面(C)傳遞（隔著一個中間頁面(B)傳值）,不需要很復雜的寫好幾個`this.props.XX = XXOO`，
可以直接在B頁面中，C頁面的代碼處寫`{...this.props}`就能將A的頁面傳來的數據給C。
13. 後面就是關於CSS部分，明天再來聊，拜拜啦。

17-7-24-react入門