react.js筆記

 

　　　　　　React入門教程：

　　　　　　https://hulufei.gitbooks.io/react-tutorial/content/component.html

　　　　　　https://segmentfault.com/a/1190000002647357

　　　　　    http://www.cocoachina.com/webapp/20150721/12692.html

 

 　　　　　　React 是爲了解決一個問題：構建隨着時間數據不斷變化的大規模應用程序。爲了達到這個目標，React 採用下面兩個主要的思想。

　　　　　　1:僅僅只要表達出你的應用程序在任一個時間點應該長的樣子，而後當底層的數據變了，React 會自動處理全部用戶界面的更新。

　　　　　　2:數據變化後，React 概念上與點擊「刷新」按鈕相似，但僅會更新變化的部分。

 　　　　

　　　　　JSX

　　　　　　JSX兩個花括號：{}渲染成動態值，花括號指明瞭一個JavaScript上下文環境——或括號內的任何東西都會進行求值，獲得的結果會被渲染爲標籤中的若干節點。

　　　　　　表達式寫在{}中。

　　　　　　對於簡單值，好比文本或者數字，你能夠直接引用對應的變量。

 

　　　　Virtual DOM

　　　　　　當組件狀態 state 有更改的時候，React 會自動調用組件的 render 方法從新渲染整個組件的 UI。

　　　　　　固然若是真的這樣大面積的操做 DOM，性能會是一個很大的問題，因此 React 實現了一個Virtual DOM，

　　　　　　組件 DOM 結構就是映射到這個 Virtual DOM 上，React 在這個 Virtual DOM 上實現了一個 diff 算法，當要從新渲染組件的時候，會經過 diff 尋找到要變動的 　　　　　

　　　　　　DOM 節點，再把這個修改更新到瀏覽器實際的 DOM 節點上，因此實際上不是真的渲染整個 DOM 樹。這個 Virtual DOM 是一個純粹的 JS 數據結構，因此性能會比原生 DOM 快不少。

 

　　　　　組件

　　　　　　對於一個組件來說，render方法是惟一一個必需的方法。render方法須要知足下面幾點：

1. 1. 　只能經過 this.props 和 this.state 訪問數據（不能修改）

   2. 　能夠返回 null,false 或者任何React組件

   3. 　只能出現一個頂級組件，不能返回一組元素

   4. 　不能改變組件的狀態

   5. 　不能修改DOM的輸出

　　　　　　render方法返回的結果並非真正的DOM元素，而是一個虛擬的表現，相似於一個DOM tree的結構的對象。react之因此效率高，就是這個緣由。

　　　　　　多看看該文檔，順便提升英語閱讀能力，哈哈 https://reactjs.org/docs/thinking-in-react.html

 

　　　　　　React.createClass 方法就用於生成一個組件類。

　　　　　　

 

　　　　　　1）獲取屬性的值用的是this.props.屬性名

　　　　　　2）建立的組件名稱首字母必須大寫。

　　　　　　3）爲元素添加css的class時，要用className。

　　　　　　4）組件的style屬性的設置方式也值得注意，要寫成style={{width: this.state.witdh}}。

 

 

　　　　　組件有兩個核心概念：

• • • props
    • state

　　　　　　一個組件就是經過這兩個屬性的值在 render 方法裏面生成這個組件對應的 HTML 結構。

　　　　　　注意：組件生成的 HTML 結構只能有一個單一的根節點。

 

　　　　props

　　　　　　props 就是組件的屬性，由外部經過 JSX 屬性傳入設置，

　　　　　　一旦初始設置完成，就能夠認爲 this.props 是不可更改的，

　　　　　　因此不要輕易更改設置 this.props 裏面的值（雖然對於一個 JS 對象你能夠作任何事）。this.props就是組件的屬性集合。

　　　　state

　　　　　　state 是組件的當前狀態，能夠把組件簡單當作一個「狀態機」，根據狀態 state 呈現不一樣的 UI 展現。

　　　　　　一旦狀態（數據）更改，組件就會自動調用 render 從新渲染 UI，這個更改的動做會經過 this.setState方法來觸發。

 

　　　　　　getInitialState是用來初始化state，handleClick是用來處理咱們點擊事件的。

　　　　　　經過this.state.屬性名來訪問屬性值，這裏咱們將enable這個值跟input的disabled綁定，當要修改這個屬性值時，要使用setState方法。

　　　　　　咱們聲明handleClick方法，來綁定到button上面，實現改變state.enable的值，代碼以下：

　　　　　　

　　　　　　

 

　　　　　　在組件的整個生命週期中，隨着該組件的props或者state發生改變，其DOM表現也會有相應的變化。一個組件就是一個狀態機，對於特定地輸入，它總返回一致的輸出。

　　　　　　一個React組件的生命週期分爲三個部分：實例化、存在期和銷燬時。

實例化

當組件在客戶端被實例化，第一次被建立時，如下方法依次被調用：

一、getDefaultProps
二、getInitialState   方法用於定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。
三、componentWillMount
四、render
五、componentDidMount

當組件在服務端被實例化，首次被建立時，如下方法依次被調用：

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、render

componentDidMount 不會在服務端被渲染的過程當中調用。

 

存在期

此時組件已經渲染好而且用戶能夠與它進行交互，好比鼠標點擊，手指點按，或者其它的一些事件，致使應用狀態的改變，你將會看到下面的方法依次被調用

一、componentWillReceiveProps
二、shouldComponentUpdate
三、componentWillUpdate
四、render
五、componentDidUpdate

 

銷燬時

componentWillUnmount

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

當再次裝載組件時，如下方法會被依次調用：

一、getInitialState
二、componentWillMount
三、render
四、componentDidMount

 

下圖爲React組件四條更新路徑地總結：

測試例子原文地址：http://www.jianshu.com/p/4784216b8194