17-7-25-js記錄

標籤：object   number   install   覆蓋   define   rgs   狀態   是什麼   也有   

先說明下為什麼說好每天一更，周五周六周日都沒有更新。因為在周五的時候，上司主動找我談了轉正後的工資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])

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

17-7-25-js記錄