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

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

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

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

static getDerivedStateFromProps：在render之前被調(diào)用，它可以通過返回一個值改變state如：

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

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

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

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

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

//可以是React元素如'<div/>'或'<MyComponent/>' 
//或用React.createElement(type, ?props, ?children)創(chuàng)建的元素、
//可以是數(shù)組(該數(shù)組類似于this.props.children的形式['Test', ['nest test'], ...others])
//或Fragments、
//可以是字符串或數(shù)值類型(被當(dāng)作字符串)、
//可以是布爾類型或null(當(dāng)是布爾或null時，什么都不渲染)；
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組件樹之后調(diào)用；在這里可以獲取異步數(shù)據(jù)或者依賴DOM節(jié)點(diǎn)的初始化，也比較適合在這個時候添加訂閱(記得在componentWillUnmount時取消訂閱)；在此調(diào)用setState會觸發(fā)額外的渲染，但它發(fā)生在瀏覽器更新屏幕之前，所以即使調(diào)用了兩次的render，用戶也看不到中間狀態(tài)；

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

shouldComponentUpdate：在繼承ReactComponent的組件可用，繼承React.PureComponent的組件不可用；返回true表示更新組件，否則相反，也就是當(dāng)shouldComponentUpdate返回false時，render方法不會被調(diào)用，componentDidUpdate也不會被調(diào)用；shouldComponentUpdate(nextProps, nextState){}可以手動對比this.props與nextProps、this.state與nextState；但是如果返回的是false，不會阻止子組件在state更新時的重新渲染，即使子組件更新了也拿不到新的props，因?yàn)楦附M件沒有更新；

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

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

3，卸載：componentWillUnmount(常用)

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

4，static getDerivedStateFromError、componentDidCatch；

static getDerivedStateFromError：

componentDidCatch：

參考文檔

React Component

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

最新評論