[TOC] ## 前言 通過本文你將知道react的基本生命周期，并對各個周期適合寫什么函數做什么事情有更深度的了解。 ## 圖解生命周期  ## 生命周期的狀態 - 組件的生命周期分成三個狀態：已渲染，更新渲染，被移出 > Mounting：已插入真實 DOM > Updating：正在被重新渲染 > Unmounting：已移出真實 DOM - 鉤子函數 React 為每個狀態都提供了兩種處理函數，will 函數在進入狀態之前調用，did 函數在進入狀態之后調用，三種狀態共計五種處理函數。 ~~~ componentWillMount() componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount() ~~~ 此外，React 還提供兩種特殊狀態的處理函數 ~~~ componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用 shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用 ~~~ ## 生命周期的探索 經過探索可以得到組件的生命周期在不同狀態的執行順序： - 當首次裝載組件時，按順序執行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount - 當卸載組件時，執行 componentWillUnmount； - 當重新裝載組件時，此時按順序執行 getInitialState、componentWillMount、render 和 componentDidMount，但并不執行 getDefaultProps - 當再次渲染組件時，組件接受到更新狀態，此時按順序執行 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate ## 一些個人建議 ### 初始化數據可以在componentWillMount 此時執行不會觸發重新渲染 ### 拉取數據在componentDidMount 執行 下面這段代碼的好處在于將整個組件需要的loading，data，error統一放到狀態機去管理，在請求數據渲染的時候去執行相關的狀態判斷，在組件完成渲染的時候，請求數據之后更新狀態機然后完成新數據的展示。 ~~~ getInitialState: function() { return { data: null, fetching: false, error: null }; }, render: function() { if (this.props.fetching) { return <div>Loading...</div>; } if (this.props.error) { return ( <div className='error'> {this.state.error.message} </div> ); } return <Counter {...data} /> }, componentDidMount: function() { this.setState({fetching: true}); Axios.get(this.props.url).then(function(res) { this.setState({data: res.data, fetching: false}); }).catch(function(res) { this.setState({error: res.data, fetching: false}); }); } ~~~ - componentWillReceiveProps() 這個方法允許我們在state改變觸發組件渲染之前，對數值做響應的修改。需要注意的是，這個事件是針對整個組件的，所以你要觸發改變首先要想好有哪些屬性可能發生改變，需要做修改的是那些。需要做的是針對組件整體執行的事件而不針對某一個state，所以傳入的是整體的props。 ~~~ componentWillReceiveProps: function(newProps) { this.setState({count: newProps.initialCount}); }, ~~~ - shouldComponentUpdate() 方法允許我們自行決定下一個state更新時是否觸發重復render。此方法返回一個布爾值，且默認是true。但是我們也可以返回false，這樣下面的（生命周期）方法將不會被調用：這個方法可以用來避免一些用戶交互過多的引起狀態更新，導致性能降低。 ~~~ shouldComponentUpdate: function(nextProps, nextState) { if (this.props.text === nextProps.text) return false; return true; }, ~~~ - componentWillUpdate() 當接收到新的屬性或者state時在render之前會立刻調用componentWillUpdate()方法。可以利用此時機來為更新做一些準備工作，雖然這個階段不能調用this.setState()方法，但是可以進行一些前置工作。 - componentDidUpdate() 可以在這個方法里寫一些公共的組件更新后的后置事件。這種最常見的是引入一些第三方庫之后才可以進行的操作。 - componentWillUnmount() 這個階段主要是需要清除一些無用的dom對象，一些計時器等，避免消耗 ## 參考資料 - [react生命周期詳解](https://zhuanlan.zhihu.com/purerender/20312691) -