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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM