react的鈎子函數

react的鈎子函數

掛載階段的四個鈎子
constructor -> getDerivedStateFromProps(props,state) -> render -> componentDidMount
1、構造函數，在創建組件的時候調用一次。
        constructor(props,context){}

2、在組件即將渲染時觸發，可以在此修改組件狀態
        componentWillMount

3、render渲染組件

4、組件渲染結束時觸發，可以在此請求服務器數據。
        componentDidMount

5、在props參數發生改變時觸發。
        componentWillReceiveProps

6、會在state參數發生改變時觸發，當成功發生改變會觸發
        shouldComponentUpdate
    然后重新渲染組件
        componentWillUpdate

7、組件卸載時觸發(卸載階段的鈎子函數)
        componentWillUnmount



更新階段的鈎子函數
1、static getDerivedStateFromProps(props,state)
(更新階段的鈎子函數)

2、shouldComponentUpdate(nextProps,nextState){}
    返回true 則更新渲染
    返回false 則不渲染
存組件(進行淺比對，進行性能的優化)
    pureComponent 
無狀態組件進行渲染優化
    React.memo()

3、render(){}

4、getSnapeShotBeforeUpdate(prevprops,prevState){
    return 100 (100這個值，返回給componentDidMount的第三個參數)
}
5、監聽數據變化
componentDidUpdate(prevProps,prevState,snapShot){
        console.log(snapShot)
    }



卸載階段的鈎子函數
componentWillUnmount(){}

​