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