React的生命週期共分成三大塊,創建、更新、銷毀
class component自帶生命週期,functional component則需要hook來處理生命週期及狀態
掛載階段
執行順序是這樣 contructor => render => componentDidMount
- contructor 為最先被呼叫的方法,可以在此做一些初始值的處理
componentDidMount
在element被添加到DOM上時觸發,這時候操作DOM才會有內容,在這裡可以使用Ajax請求或事件監聽setState()
為異步程序,盡量避免在此之後做state值的運算,可以在第二個參數包成函式傳入this.setState( { time: new Date().toLocaleTimeString(), }, () => { document.title = this.state.time } )
setState()
需要在DOM渲染完畢後才取值
更新階段
觸發更新的方法有三種
- props改變
- setState()
- forceUpdate()
接下來會在觸發render進入componentDidUpdate
不要在這個階段做setState(),會造成無限迴圈!!!
卸載階段
觸發componentWillUnmount
,可以在這個階段做subscription的解除避免效能浪費