React入門0x008 生命週期

上一章說明了生命週期的概念，本質上就是框架在操作元件的過程中暴露出來的一系列鉤子，我們可以選擇我們需要的鉤子，完成我們自己的業務，以下講的是react v16.3以下的生命週期，v16.3以及以上的版本有所不同

以下是元件掛載的過程中觸發的宣告週期：

以下是元件更新的時候觸發的生命週期：

constructor()

settimeout(() => )

}, 3000)

}componentwillreceiveprops()

shouldcomponentupdate()

render()

}componentwillupdate()

componentdidupdate() }

第一次的render是由元件掛載引起的，而其他的方法則是由setstate引起的

以下是由元件解除安裝的時候觸發的生命週期：

掛載：

constructor
componentwillmount
render
componentdidmount
更新：componentwillreceiveprops
shouldcomponentupdate
componentwillupdate
render
componentdidupdate
解除安裝：componentwillunmount
錯誤處理（這裡不說）：
componentdidcatch

該方法主要用來初始化state，或者初始化一些資源，可以訪問prop，但是訪問不了this.statedirectly or define a

}render() }

componentwillmount()

沒啥卵用，可以在這個方法中呼叫setstate()，並且設定的state可以在本次渲染生效，推薦使用constructor

***，每次更新狀態都會觸發，但是不要在這裡呼叫會觸發元件更新的函式，比如setstate()，否則可能陷入無盡阿鼻地獄。

這個方法常用，觸發這個生命週期，意味著dom和子元件都掛載好了，refs也可以用了，一般在這兒做網路請求。

這個元件也常用，一般用於父元件狀態更新，導致傳遞給子元件的props更新，當時子元件又不是直接繫結父元件的props的時候使用，比如

class content extends react.component 

}render() 
} constructor() 
settimeout(() => )
}, 1000)
}render() 
}

class content extends react.component 

}componentwillreceiveprops(nextprops) )
}render() 
}

shouldcomponentupdate(nextprops, nextstate)

這個元件也很常用，用來判斷是否要進行某次更新，如果返回true則執行更新，如果返回false則不更新，常用與效能優化

class a extends react.component 

}class b extends react.component 
} constructor(props) 
settimeout(() => )})}
render() 
}}reactdom.render(
)class a extends react.component 

render() 
}class b extends react.component 
render() 
}

沒啥卵用，和componentdidupdate組成一對兒，如果業務需要，就用

沒啥卵用，和componentwillupdate組成一對兒，如果業務需要，就用

用於清理資源或者事件

class content extends react.component 

如果我們返回顯示隱藏元件，就會積累越來越多的定時器。然後就**了。
```class content extends react.component 
this.interval=setinterval(() => )
console.log(this.state.num)
}, 1000)
}render() 
componentwillunmount()
}```
這麼解決