React生命週期鉤子

我一直以爲這張圖描述的真是太好了，首先，先看圖。。

 

初始化階段

constructor(props){
　　super(props)
　　//能夠進行state的設置
　　this.state={
　　　　name: '"拈花煮酒"
　　}
}

 

props的初始設置是在組件的外面
或者在內部使用 靜態屬性 static

class Home extends React.Component {
　　constructor(props) {
　　　　super(props);
　　　　this.state={
　　　　　　age: props.age
　　　　}
　　}
}
Home.defaultProps = {
　　//進行props的初始設置
　　age: 18
}


//或者在內部

static defaultProps = {

　　age: 18
}

 

componentWillMount(){
　　由於這個鉤子是在render以前執行的，因此setState()再次方法中同步調用不會觸發額外的渲染，
　　建議使用constructor()進行初始化設置

}

render(){
　　//組件進行渲染
}
componentDidMount() {

　　//通常狀況下，我會在這裏作數據的請求

}

componentWillReceiveProps(){

　　//只會在props更新時執行，第一次渲染時不會執行 存在於生存期

 }

shouldComponentUpdate（）{

　　這個鉤子通常用來作優化，不過有時也會有各類各樣的問題，詳細用法能夠查看本人的這篇文章

　　http://www.cnblogs.com/luxiaot/p/10097572.html

}

其餘API
　　與上面的生命週期方法（React爲您調用）不一樣， 下面的方法是您能夠從組件調用的方法
　　只有兩個： setState() 和 forceUpdate()

setState()將組件狀態的更改排入隊列並告訴React須要使用更新的狀態從新呈現此組件及其子組件，這是用於更新用戶界面以響應事件處理程序和服務器響應的主要方法
能夠將其setState()視爲請求而不是當即更新組件的命令。爲了得到更好的感知性能，React可能會延遲她，而後在一次經過中更新幾個組件。React不保證當即更改狀態
setState()並不老是當即更新組件。它能夠批量推遲更新或延遲更新，而使用componentDidUpdate或者setState回調函數（第二個參數）,其中任何一個都保證在應用更新後觸發。這時咱們可能會想到vue的nextTick
setState() 除非shouldComponentUpdate()返回false，不然會從新渲染。

forceUpdate()

　　若是 render() 方法從 this.props 或者 this.state 以外的地方讀取數據，你須要經過調用 forceUpdate() 告訴 React 何時須要再次運行 render()。若是直接改變了 this.state，也須要調用 forceUpdate()。調用 forceUpdate() 將會致使 render() 方法在相應的組件上被調用，而且子級組件也會調用本身的 render()，可是若是標記改變了，那麼 React 僅會更新 DOM。一般狀況下，應該儘可能避免全部使用 forceUpdate() 的狀況，在 render() 中僅從 this.props 和 this.state 中讀取數據。這會使應用大大簡化，而且更加高效。

 

虛擬DOM

爲何要使用虛擬DOM?
　　虛擬DOM是爲了提升DOM渲染性能的,由於瀏覽器的DOM操做是最消耗性能的
　　把一個真實的DOM樹轉換成js對象樹(createElment),當咱們改變頁面的時候,就會產生一個目標的對象樹,兩棵對象樹進行比較,在內存中進行比較,比較出的不一樣點進行渲染
同級比較算法(一旦發現某個節點沒有了,就刪除這個節點;一旦發現新增了一個節點,就新增一個節點;遇到相同的節點則保留)
逐層比較算法的問題:
　　1.兩棵樹若是變化特別大,則次算法無效
　　2.若是兄弟節點特別多的時候,插入和排序則變得很低效
逐層比較算法的好處(高效):
　　1.算法的時間複雜度下降(由O(n^3)變爲O(n))
兩個假設
　　1.兩個相同組件產生相似的DOM結構,不一樣的組件產生不一樣的DOM結構
　　2.對於同一層次的一組子節點,它們能夠經過惟一的id進行區分

　

碼字不易，轉載請註明出處，謝謝！！