不得不聊聊的react--入門篇

本文爲學習筆記，適合入門的童鞋，若有錯誤，請多多指教。

1、react誕生

Web app的性能瓶頸，主要有如下緣由。

（1）Web基於DOM，而DOM很慢。瀏覽器打開網頁時，須要解析文檔，在內存中生成DOM結構，若是遇到複雜的文檔，這個過程是很慢的。能夠想象一下，若是網頁上有上萬個、甚至幾十萬個形狀（不論是圖片或CSS），生成DOM須要多久？更不要提與其中某一個形狀互動了。

（2）DOM拖慢JavaScript。全部的DOM操做都是同步的，會堵塞瀏覽器。JavaScript操做DOM時，必須等前一個操做結束，才能執行後一個操做。只要一個操做有卡頓，整個網頁就會短暫失去響應。瀏覽器重繪網頁的頻率是60FPS（即16毫秒/幀），JavaScript作不到在16毫秒內完成DOM操做，所以產生了跳幀。用戶體驗上的不流暢、不連貫就源於此。

（3）網頁是單線程的。如今的瀏覽器對於每一個網頁，只用一個線程處理。全部工做都在這一個線程上完成，包括佈局、渲染、JavaScript執行、圖像解碼等等，怎麼可能不慢？

（4）網頁沒有硬件加速。網頁都是由CPU處理的，沒用GPU進行圖形加速。

這裏咱們看到了dom的問題，下面來學習下react作了哪些事情，就大概清楚爲何react解決了以上問題。

優點：

• 組件可複用性和擴展性好，開發效率提升

• 先後端渲染模板上的統一，客戶端和服務器均可渲染

• 引入虛擬DOM，每一個React組件都擁有一個完整的生命週期，對DOM狀態的操做都會批量更新，以期儘量的減小頁面重繪，來追求更好的性能

劣勢：

• 框架100k,自己較大，手機頁面基本首屏WIFI/4S，3G/6S，能夠考慮客戶端緩存

• 據其餘業務反映，無其餘劣勢，好評一片

框架建議：REACT+後臺直出+前端SPA，後續考慮Service Worker、或者上傳到cdn減小後續加載

2、基礎

　　React 能夠在瀏覽器運行，也能夠在服務器運行；

`react.js` 是 React 的核心庫
`react-dom.js` 是提供與 DOM 相關的功能
`Browser.js` 的做用是將 JSX 語法轉爲 JavaScript 語法，此步驟應在服務器完成

監聽jsx文件到js自動轉化方法：咱們都知道react實際上是以jsx的方式編碼，這就涉及由jsx到js的轉化，如下爲自動轉化方式

• npm install -g react-tools

• jsx --watch src/ build/

[JSX] (http://facebook.github.io/jsx/) 是一個看起來很像 XML 的 JavaScript 語法擴展。React 能夠用來作簡單的 JSX 句法轉換。

重點一：組件

ReactDOM.render 是 React 的最基本方法

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

React 容許將代碼封裝成組件（component），React.createClass 方法就用於生成一個組件類 HelloMessage 。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。全部組件類都必須有本身的 render 方法，用於輸出組件。

注意：
一、組件類的第一個字母必須大寫，不然會報錯。HelloMessage
二、組件類只能包含一個頂層標籤，不然也會報錯。h1

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。
從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性

重點二：生命週期

組件的生命週期分紅三個狀態：

• Mounting：已插入真實 DOM

• Updating：正在被從新渲染

• Unmounting：已移出真實 DOM

React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用，三種狀態共計五種處理函數。

• componentWillMount()

• componentDidMount()

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。

• componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用

• shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用

<應用>
動畫類：能夠採用componentDidMount，利用定時器不斷變化形狀或者透明度等形態
ajax:可使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法從新渲染 UI

重點三：state

React 的一大創新，就是將組件當作是一個狀態機，一開始有一個初始狀態，而後用戶互動，致使狀態變化，從而觸發從新渲染 UI。

getInitialState：用於定義初始狀態，也就是一個對象
this.state ：屬性讀取
this.setState： 修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件

state和props不一樣：

this.props 表示那些一旦定義，就再也不改變的特性，它們從父組件傳遞過來，「屬於」父組件。
this.state 是會隨着用戶互動而產生變化的特性。故表單類渲染也須要用state，this.state 是組件私有的，能夠經過調用 this.setState()來改變它。當 state 更新以後，組件就會從新渲染本身。

重點四：react編碼過程：

• 第一步：拆分用戶界面爲一個組件樹

• 第二步： 利用 React ，建立應用的一個靜態版本

• 第三步：識別出最小的（可是完整的）表明 UI 的 state,分析是否爲state 。簡單地對每一項數據提出三個問題：

  1. 是從父級經過 props 傳入的？可能不是 state 。

  2. 不會隨着時間改變？可能不是 state 。

  3. 能根據組件中其它 state 數據或者 props 計算出來？不是 state 。

• 第四步：確認 state 的生命週期，判斷哪一個組件會改變或者說擁有這個 state 數據模型。

  1. 找出每個基於那個 state 渲染界面的組件。

  2. 找出共同的祖先組件（某個單個的組件，在組件樹中位於須要這個 state 的全部組件的上面）。

  3. 要麼是共同的祖先組件，要麼是另一個在組件樹中位於更高層級的組件應該擁有這個 state 。

  4. 若是找不出擁有這個 state 數據模型的合適的組件，建立一個新的組件來維護這個 state ，而後添加到組件樹中，層級位於全部共同擁有者組件的上面

• 第五步：添加反向數據流，組件之間常常交互，從父級到子級比較簡單，這裏說的從子級到父級

相關連接：
中文社區：http://react-china.org/
facebook react官網：http://facebook.github.io/react/