React.js學習知識小結（一）

學習React也有半個月了吧，這裏對所學的基礎知識作個簡單的總結。本身先是跟着官方文檔學，差很少學了四五天，也跟着入門教程作了一個簡單的小栗子。而後跟着阮一峯老師的教程上手了幾個小Demo，後來在網上發現了一本很好的書React.js小書，本身斷斷續續也學了幾天，上面也幾個實戰的小項目，能夠跟着練練手。
話很少說，就直接來總結吧！

• JSX
• 組件
• 區分props和state
• 生命週期函數
• 事件系統
• 高階組件
• React.js的context
• 函數式編程
• 使用PropTypes檢查類型
• ref屬性和React.js中的DOM操做

JSX

---

JSX實際上是一個表達式，可是通過編譯以後，JSX表達式會成爲常規的JavaScript對象，能夠在JSX中嵌入任何的JavaScript表達式，方法是放在花括號裏面，還能夠將JavaScript表達式嵌入到HTML的屬性當中，還有HTML屬性也是使用駝峯式命名的方法。
注意：這裏JSX防止注射攻擊，React DOM會在渲染以前將嵌入在JSX中的任何值進行轉義，在呈現以前，所有轉換成字符串。
這裏引出兩個個關於面試的問題？

1. 怎麼將一個相似HTML的JSX結構轉換成一個JavaScript對象
2. 爲何不直接經過JSX到達DOM元素呢，而是要經過JSX-JavaScript對象-DOM元素-插入頁面。
   針對第一個問題，須要先了解JSX的原理問題，其實JSX就是JavaScript對象，其實每一個DOM元素的結構均可以用JavaScript對象來表示，一個DOM元素包含的信息其實只有三個：標籤名、屬性、子元素。

{
    tag: 'div', 
    attrs: { className: 'box', id: 'content'}, 
    children: [
                         { tag: 'div', arrts: { className: 'title' }, children: ['Hello'] },
                       { tag: 'button', attrs: null, children: ['Click'] }
] 
}

我也只是想到一個笨的方法思路，既然想將一個相似HTML的結構的JSX轉換成一個JavaScript對象，天然而然須要一箇中間者，而這個中間者能夠是一個函數，經過傳入參數，而後返回一個JavaScript對象，這個參數能夠經過傳統的DOM操做來獲取這個JavaScript對象所須要的tag，attrs，children。

針對第二個問題，有兩個緣由：
第一個：當咱們拿到一個表示UI結構和信息的對象的時候，不必定會把元素渲染到瀏覽器的普通頁面上，這個是經過react-dom實現的，也有可能將這樣的對象渲染到canvas，渲染成一個APP.
第二個：當數據要變化的時候，須要更新組件的時候，能夠用比較快的算法來操做JavaScript對象，而不用直接操做頁面上的DOM，這樣就能夠減小瀏覽器重排，極大的優化性能。

組件

說到組件問題，就有幾個小點須要提出來

• 怎麼劃分組件
  -有狀態組件和無狀態組件
• 組件的組合和繼承
  -組合組件至關於構建了一個組件樹
• 編寫組件時需注意的規範
  1.組件的私有方法都是以_開頭，全部事件監聽的方法都用handle開頭，把事件監聽方法傳給組件的時候，屬性名用on開頭
  2.組件內容的編寫順序：
  （1）static開頭的類屬性，如defaultProps，propTypes
  （2）構造函數，constructor
  （3）getter和setter
  （4）組件的生命週期
  （5）_開頭的私有方法
  （6）事件監聽的方法
  （7）render開頭的方法，有時候render方法裏面的內容會分開到不一樣函數裏面進行，這些函數都以render開頭
  （8）render方法

區分props和state

React元素能夠是DOM標籤，也能夠是用戶自定義組件，在涉及到組件渲染的時候，就須要用到自定義組件，當React元素遇到的是用戶自定義組件，它會將JSX屬性看成單個屬性傳遞給該組件，這個對象稱之爲props。

對於state，要實時更新UI是經過某個組件內部的方法，從而實現封裝的效果。狀態和屬性十分類似，可是狀態是私有的，徹底受控於當前組件，用ES6的類的語法定義組件，有一些特性，局部狀態就是如此。

使用類class定義組件，就可使用類的一些特性：局部狀態和生命週期鉤子。並且不能直接更新狀態，而是使用setState()方法，並且初始化this.state的方法只能是構造函數裏面。

組件能夠選擇將狀態做爲屬性傳遞給其子組件，這個一般被稱爲自頂向下或單向數據流。能夠在有狀態的組件中使用無狀態組件，也能夠在無狀態組件中使用有狀態組件。

儘可能少的使用state，儘可能多的使用props。

生命週期函數

組件的生命週期能夠分紅3個狀態：
Mounting：已插入真實DOM，
updating：正在被從新渲染，
Unmounting：已移出真實DOM.
上面的三種狀態又存在兩種：will和did，因此總共來講有6種方法。

---

1.Mounting狀態下的方法調用順序：

->getDefaultProps()：對於每一個組件類來說，這個方法只會調用一次，該組件類的全部後續應用，getDefaultProps將不會再被調用，其返回的對象能夠用於設置默認的props值
->getInitialState():在組件實例化以前被調用一次，返回初識的state值，有狀態組件應該實現此函數。對於組件的每一個實例來講，這個方法的調用有且只有一次，用來初識話每一個實例的state，在這個方法裏面能夠訪問組件的props，每個React組件都有本身的state，與props的區別在於state只位於組件的內部，而props在全部實例中共享。
->componentWillMount():在組件掛載以前調用一次
->render()
->componentDidMount()：在組件掛載以後調用一次

2.每次修改state，都會從新渲染組件，會依次調用下列方法
shouldComponenrtUpdate()
componentWillUpdate()
render()
componentDidUpdate()

---

3.Updating狀態下的順序
父組件render()
->componentWillReceiveProps:組件的props屬性能夠經過父組件來更改，此時這個方法將被調用。能夠在這個方法裏更新state，以觸發render從新渲染組件。
->shouldComponentUpdate()：能夠返回flase阻止組件的從新渲染，從而提升性能
->componentWillUpdate()
->render()
->componentDidUpdate()：除了首次render以後調用componentDidMount，其餘render結束以後都調用這個方法

---

4.Unmounting
每當React使用完一個組件，這個組件必須從DOM中卸載後被銷燬，此時
componentWillUnmount會被執行，完成全部的清理和銷燬工做。在componentDidMount中添加的任務都須要在該方法中撤銷，如建立的定時器或時間監聽器。

事件系統

在React.js中不須要手動調用瀏覽器原生的addEventListener進行事件監聽，它幫咱們封裝好了一系列的on事件，並且不須要考慮不一樣瀏覽器的兼容性。這些事件的屬性都要用駝峯命名法。這些on事件監聽只能用在普通的HTML標籤上，而不能用在組件標籤上。

和普通瀏覽器同樣，事件監聽函數會自動傳入一個event對象，這個對象和普通的瀏覽器event對象所包含的方法和屬性都基本一致，不一樣的是React.js這個event對象不是瀏覽器提供的，而是它本身內部構建的。React.js將瀏覽器原生的event對象進行了封裝，不用考慮瀏覽器兼容問題。

Function.prototype.bind,調用f.bind(someObject)會建立一個和f有着相同函數體和做用域的函數，可是這個新函數中，this將永遠被綁定在bind的第一個參數，不管這個函數是如何被調用的。React.js的事件監聽方法須要手動bind到當前實例，這種模式在React.js中是很是經常使用的

事件分個簡單的小類：

• 剪貼板事件
• 鍵盤事件
• 鼠標事件
• 觸摸事件
• 焦點事件
• 表單事件
• UI事件