淺談React Component生命週期函數

React元件有哪些生命週期函數？類元件才有的生命週期函數，包括ES6語法的class以及create-react-class模組：

分為幾個階段：掛載，更新，解除安裝，錯誤處理；

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

constructor是類元件的建構函式，在這可以初始化元件的state或進行方法系結如：constructor(props){ super(props);this.state={test: 'test'};this.someFn = this.someFn.bind(this);}，否則可以不用顯式實現constructor方法；

static getDerivedStateFromProps：在render之前被呼叫，它可以通過返回一個值改變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；不管出於什麼原因，或元件內的shouldComponentUpdate返回false，它都在渲染前被執行；

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

另外有個UNSAFE_componentWillReceiveProps是在父元件重新渲染時觸發；

render就是渲染函數，返回React元素，它是class元件必須實現的方法；是個純函數，只管返回React元素，且不會直接與介面互動，互動一般放在ComponentDidMount或ComponentDidUpdate等週期中；render方法的返回值型別可以：

//可以是React元素如'<div/>'或'<MyComponent/>' 
//或用React.createElement(type, ?props, ?children)建立的元素、
//可以是陣列(該陣列類似於this.props.children的形式['Test', ['nest test'], ...others])
//或Fragments、
//可以是字串或數值型別(被當作字串)、
//可以是布林型別或null(當是布林或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元件樹之後呼叫；在這裡可以獲取非同步資料或者依賴DOM節點的初始化，也比較適合在這個時候新增訂閱(記得在componentWillUnmount時取消訂閱)；在此呼叫setState會觸發額外的渲染，但它發生在瀏覽器更新螢幕之前，所以即使呼叫了兩次的render，使用者也看不到中間狀態；

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

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

getSnapshotBeforeUpdate：在最後一次渲染輸出(提交到DOM節點)之前呼叫，可以在元素提交到DOM之前收集當前的DOM資訊(例如當前DOM的捲動位置)，之後返回待傳給componentDidUpdate週期方法(該方法是元素提交到DOM之後呼叫的，所以此時獲取的DOM資訊是更新後的)；

componentDidUpdate：componentDidUpdate(prevProps, prevState, snapshot){}；元件更新後被呼叫，可以在此處操作DOM，比較前後props或state非同步請求資料等；第三個引數是元件的生命週期getSnapshotBeforeUpdate的返回值，若沒有定義getSnapshotBeforeUpdate，則componentDidUpdate的第三個引數則為undefined；

3，解除安裝：componentWillUnmount(常用)

componentWillUnmount：該週期方法會在元件解除安裝及銷燬之前呼叫；可以在此處清楚timer、取消網路請求、取消訂閱等，釋放記憶體；

4，static getDerivedStateFromError、componentDidCatch；

static getDerivedStateFromError：

componentDidCatch：

參考檔案

React Component

到此這篇關於淺談React Component生命週期函數的文章就介紹到這了,更多相關React Component生命週期內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！