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(){}