淺談React Component生命周期函數

React組件有哪些生命周期函數？類(lèi)組件才有的生命周期函數，包括ES6語(yǔ)法的class以及create-react-class模塊：

分為幾個(gè)階段：掛載，更新，卸載，錯誤處理；

1，掛載：constructor(常用)、static getDerivedStateFromProps、render(常用)、componentDidMount(常用)

constructor是類(lèi)組件的構造函數，在這可以初始化組件的state或進(jìn)行方法綁定如：constructor(props){ super(props);this.state={test: 'test'};this.someFn = this.someFn.bind(this);}，否則可以不用顯式實(shí)現constructor方法；

static getDerivedStateFromProps：在render之前被調用，它可以通過(guò)返回一個(gè)值改變state如：

static getDerivedStateFromProps(nextProps, prevState){
 
    if(props.test !== state.test){
        return {state: props.state}; //返回的這部分稱(chēng)為partialState
//這會(huì )稱(chēng)為新的state的一部分，nextState將會(huì )是_assign({}, prevState, partialState)；
    }
 
    return null; 
//返回的是null 或undefined，則nextState將是prevState，及不會(huì )改變組件的state；

它的目的只有一個(gè)，就是讓組件在props變化更新state，也是state的值依賴(lài)于props；不管出于什么原因，或組件內的shouldComponentUpdate返回false，它都在渲染前被執行；

與static getDerivedStateFromProps相似的生命周期是componentWillReceiveProps(nextProps)，在componentWillReceiveProps調用this.setState({...});改變state；在使用static getDerivedStateFromProps以及componentWillReceiveProps時(shí)要謹慎、需要考慮性能、避免bug的出現，有需要可以考慮React.PureComponent或React.memo或完全可控組件或使用key非可控組件來(lái)代替上面的getDerivedStateFromProps以及componentWillReceiveProps；

另外有個(gè)UNSAFE_componentWillReceiveProps是在父組件重新渲染時(shí)觸發(fā)；

render就是渲染函數，返回React元素，它是class組件必須實(shí)現的方法；是個(gè)純函數，只管返回React元素，且不會(huì )直接與界面交互，交互一般放在ComponentDidMount或ComponentDidUpdate等周期中；render方法的返回值類(lèi)型可以：

//可以是React元素如'<div/>'或'<MyComponent/>' 
//或用React.createElement(type, ?props, ?children)創(chuàng  )建的元素、
//可以是數組(該數組類(lèi)似于this.props.children的形式['Test', ['nest test'], ...others])
//或Fragments、
//可以是字符串或數值類(lèi)型(被當作字符串)、
//可以是布爾類(lèi)型或null(當是布爾或null時(shí)，什么都不渲染)；
class Test extends React.Component{
    render(){
        //return 'Hello Test';
        //return true;
        //return ['Hello', ' Test'];
        //return <div>Test</div>
        //return <MyComponent>Test</MyComponent>
        return null;
    }
}

componentDidMount是組件掛載到React組件樹(shù)之后調用；在這里可以獲取異步數據或者依賴(lài)DOM節點(diǎn)的初始化，也比較適合在這個(gè)時(shí)候添加訂閱(記得在componentWillUnmount時(shí)取消訂閱)；在此調用setState會(huì )觸發(fā)額外的渲染，但它發(fā)生在瀏覽器更新屏幕之前，所以即使調用了兩次的render，用戶(hù)也看不到中間狀態(tài)；

2，更新：static getDerivedStateFromProps、shouldComponentUpdate、render(常用)、getSnapshotBeforeUpdate、componentDidUpdate(常用)

shouldComponentUpdate：在繼承ReactComponent的組件可用，繼承React.PureComponent的組件不可用；返回true表示更新組件，否則相反，也就是當shouldComponentUpdate返回false時(shí)，render方法不會(huì )被調用，componentDidUpdate也不會(huì )被調用；shouldComponentUpdate(nextProps, nextState){}可以手動(dòng)對比this.props與nextProps、this.state與nextState；但是如果返回的是false，不會(huì )阻止子組件在state更新時(shí)的重新渲染，即使子組件更新了也拿不到新的props，因為父組件沒(méi)有更新；

getSnapshotBeforeUpdate：在最后一次渲染輸出(提交到DOM節點(diǎn))之前調用，可以在元素提交到DOM之前收集當前的DOM信息(例如當前DOM的滾動(dòng)位置)，之后返回待傳給componentDidUpdate周期方法(該方法是元素提交到DOM之后調用的，所以此時(shí)獲取的DOM信息是更新后的)；

componentDidUpdate：componentDidUpdate(prevProps, prevState, snapshot){}；組件更新后被調用，可以在此處操作DOM，比較前后props或state異步請求數據等；第三個(gè)參數是組件的生命周期getSnapshotBeforeUpdate的返回值，若沒(méi)有定義getSnapshotBeforeUpdate，則componentDidUpdate的第三個(gè)參數則為undefined；

3，卸載：componentWillUnmount(常用)

componentWillUnmount：該周期方法會(huì )在組件卸載及銷(xiāo)毀之前調用；可以在此處清楚timer、取消網(wǎng)絡(luò )請求、取消訂閱等，釋放內存；

4，static getDerivedStateFromError、componentDidCatch；

static getDerivedStateFromError：

componentDidCatch：

參考文檔

到此這篇關(guān)于淺談React Component生命周期函數的文章就介紹到這了,更多相關(guān)React Component生命周期內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！