react在瀏覽器中的工做原理

前言:

react提供了的高度抽象,  在大多數狀況下, 你能夠任意地操做DOM. 但有的時候, 使用已經存在的API或者第三方庫可讓你的操做變得更方便.

 

使用react的時候, 咱們沒有直接寫DOM節點, 而是使用的虛擬節點.可是最後咱們看到的又是用一個個的DOM節點渲染出來的頁面,.

按照常理來講, 要將一個虛擬節點轉換爲一個在網頁中能正常顯示的節點, 須要必定的時間轉化, 這樣應該耗時會更長,在這一點上, react如何保證它能高效地渲染頁面呢?

這其實就是react設計巧妙的地方, react響應很是快是由於它不直接與DOM進行比較, 對DOM的描述一直存放於內存中. 使用render方法其實就是返回一個對DOM的描述, react能在內存中對這個描述進行比較, 而後以最快的時間從新更新瀏覽器.

 

爲了和瀏覽器中的內容進行交互,  想要找到一個DOM節點, 你能夠給任何位置加上一個ref屬性. 我想詳細瞭解ref.

 

組件的生命週期:

1. Mounting, 加載
2. Updating, 更新
3. Unmountion, 卸載

爲了細化生命週期的執行過程, react又提供了will, did兩種方法, will這個是在生命週期開始以前調用, did是在生命週期已經執行了後調用.

對生命週期細分:

Mounting 加載又細分爲:

1. getInitialState(),   這一步會在組件加載以前調用, 它的做用是返回一個state數據.
2. componentWillMount(),  組件被加載以前執行.
3. componentDidMount(),  組件已經被加載後調用.

updating又細分爲:

1. componentWillReceiveProps(object nextProps), 這個是在被加載的組件接受到一個新的Props時調用, 這個方法能夠用來比較this.props和nextProps的值, 以此來肯定是否要使用this.setState()方法.
2. shouldComponentUpdate(object nextProps, object nextState), 這個方法返回一個boolean值, 用來肯定組件是否要更新. 經過比較this.props和nextProps, this.state和nextState, 若是返回爲true, 則從新渲染頁面, 若是返回爲false, 則不會從新渲染頁面.
3. componentWillUpdate(object nextProps, object nextState), 這個方法在組件要更新以前調用.
4. componentDidUpate(object prevProps, object prevState), 方法在組件更新後調用.

Unmounting:

1. componentWillUnmount(), 這個在組件要被卸載前馬上會被調用.

 

加載複合組件支持如下方法:

1. component.forceUpate(), 這個方法能夠在任何已經加載了的組件的比較深的state在不經過使用this.setState()的狀況下發生改變時調用, 

 

react的兼容性:

　　支持絕大多數瀏覽器, 包括IE9及其以上.

　　對於那些連es5語法都不支持的瀏覽器, react固然也就不支持啦.

 

 

參考文檔: http://reactjs.cn/react/docs/working-with-the-browser.html