17-7-25-js記錄

先說明下爲何說好天天一更，週五週六週日都沒有更新。由於在週五的時候，上司主動找我談了轉正後的工資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部分，明天再來聊，拜拜啦。

 

昨天請假沒去公司，今天就遺留了不少任務，基本就一直在搞。
不過上司一大早過來就推翻了以前兩週作的事情，決定用比較底層的部分來寫頁面，而不是直接使用別人封裝好的。而後就是修改，調試。最後由於一點點小問題，就結束了今天的工做。
晚上的時候原本想學`react-router`部分的，可是好像是版本過低仍是什麼緣由，一直提示錯誤，很煩躁。
就先暫時不學了，明天去公司有時間再本身調試調試。

# js記錄
1. for ... of方法，用來取array中的值
2. for ... in方法，用來取object中的'key'
3. && 和 || 在執行時會形成短路
4. switch 判斷時採用的是 === 全等於
5. object 能夠屢次嵌套obj,在存儲部分數據時很好用(json格式)
6. `a = [1,2,3]; a[100] = 10001; a.length => 101; a => [1,2,3, undefined X 97, 10001]`
7. 無論function是否帶有形參，均可以在函數體中使用arguments來獲取實際傳進來的參數集合(array形式)
8. 在函數聲明時，能夠用...args來獲取剩餘的參數(funciton a (x, ...args){}; a(1,2,3,4) => x => 1,args => [2,3,4])

今天學的有點少~ 玩了幾把遊戲 明天補上。 拜拜咯。