React組件生命週期詳解

React組件生命週期

constructor( ) 構造方法

constructor是ES6對類的默認方法，經過 new 命令生成對象實例時自動調用該方法。而且，該方法是類中必須有的，若是沒有顯示定義，則會默認添加空的constructor( )方法。當存在constructor的時候⚠️必須手動調用super方法。若是在constructor中想使用this關鍵字，就必須先調用super方法 MDN-super。 在constructor中若是要訪問this.props須要在super中傳入props。可是不管有沒有定義constructor，super是否傳入props參數，在react的其餘生命週期中this.props都是可使用的，這是React自動附帶的。

class MyClass extends React.component{
    constructor(props){
        super(props); // 聲明constructor時必須調用super方法
        console.log(this.props); // 能夠正常訪問this.props
    }
}
複製代碼

constructor 構造方法經常使用來初始化state

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this.props.List
        };
        this.state.list = []; //修改state
        setTimeout(() => {
          this.setState({list: [1, 2, 3]}); //異步操做後 setState 觸發渲染
        }, 100);
    }
}
複製代碼

須要注意的是，在構造函數裏定義了state，當你想在一些操做後修改state，只須要直接操做this.state便可， 若是你在構造函數裏執行了異步操做，就須要調用setState來觸發從新渲染。在其他的地方當你須要改變state的時候只能使用this.setState，這樣 React 纔會觸發刷新UI渲染。

Class靜態方法實例屬性 初始化state

class ReactCounter extends React.Component {
	state = {
	  list: []
	};
}
複製代碼

具體文章可見Class-的靜態方法

componentWillMount() 組件掛載以前

在組件掛載以前調用且全局只調用一次。若是在這個鉤子裏能夠setState，render後能夠看到更新後的state，不會觸發重複渲染。該生命週期能夠發起異步請求，並setState。（React v16.3後廢棄該生命週期，能夠在constructor中完成設置state）

render()  渲染組件

render是一個React組件必須定義的生命週期，用來渲染dom。⚠️不要在render裏面修改state，會觸發死循環致使棧溢出。render必須返回reactDom

render() {
	const {nodeResultData: {res} = {}} = this.props;
	if (isEmpty(res)) return noDataInfo;
	const nodeResult = this.getNodeResult(res);
	return (
		<div className="workspace-dialog-result"> {nodeResult} </div>
	);
複製代碼

componentDidMount() 組件掛載完成後

在組件掛載完成後調用，且全局只調用一次。能夠在這裏使用refs，獲取真實dom元素。該鉤子內也能夠發起異步請求，並在異步請求中能夠進行setState。

componentDidMount() {
	axios.get('/auth/getTemplate').then(res => {
		const {TemplateList = []} = res;
		this.setState({TemplateList});
	});
}
複製代碼

componentWillReceiveProps (nextProps ) props即將變化以前

props發生變化以及父組件從新渲染時都會觸發該生命週期，在該鉤子內能夠經過參數nextProps獲取變化後的props參數，經過this.props訪問以前的props。該生命週期內能夠進行setState。(React v16.3後廢棄該生命週期，能夠用新的週期 static getDerivedStateFromProps 代替)

shouldComponentUpdate(nextProps, nextState) 是否從新渲染

組件掛載以後，每次調用setState後都會調用shouldComponentUpdate判斷是否須要從新渲染組件。默認返回true，須要從新render。返回false則不觸發渲染。在比較複雜的應用裏，有一些數據的改變並不影響界面展現，能夠在這裏作判斷，優化渲染效率。

componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者調用forceUpdate以後，componentWillUpdate會被調用。不能在該鉤子中setState，會觸發重複循環。(React v16.3後廢棄該生命週期，能夠用新的週期 getSnapshotBeforeUpdate)

componentDidUpdate() 完成組件渲染

除了首次render以後調用componentDidMount，其它render結束以後都是調用componentDidUpdate。該鉤子內setState有可能會觸發重複渲染，須要自行判斷，不然會進入死循環。

componentDidUpdate() {
    if(condition) {
        this.setState({..}) // 設置state
    } else {
        // 再也不設置state
    }
}
複製代碼

componentWillUnmount() 組件即將被卸載

組件被卸載的時候調用。通常在componentDidMount裏面註冊的事件須要在這裏刪除。

生命週期圖

完整的生命週期示例

class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {str: "hello"};
    }

    componentWillMount() {
        alert("componentWillMount");
    }

    componentDidMount() {
        alert("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }

    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;        // 記得要返回true
    }

    componentWillUpdate() {
        alert("componentWillUpdate");
    }

    componentDidUpdate() {
        alert("componentDidUpdate");
    }

    componentWillUnmount() {
        alert("componentWillUnmount");
    }
	render() {
        alert("render");
        return(
            <div> <span><h2>{parseInt(this.props.num)}</h2></span> <br /> <span><h2>{this.state.str}</h2></span> </div>
        );
    }
}
複製代碼

React v16.3 新加入的生命週期 （轉載）

react v16.3刪掉如下三個生命週期

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

新增兩個生命週期

• static getDerivedStateFromProps
• getSnapshotBeforeUpdate

static getDerivedStateFromProps

• 觸發時間：在組件構建以後(虛擬dom以後，實際dom掛載以前) ，以及每次獲取新的props以後。
• 每次接收新的props以後都會返回一個對象做爲新的state，返回null則說明不須要更新state.
• 配合componentDidUpdate，能夠覆蓋componentWillReceiveProps的全部用法

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 沒錯，這是一個static
  }
}
複製代碼

getSnapshotBeforeUpdate

• 觸發時間: update發生的時候，在render以後，在組件dom渲染以前。
• 返回一個值，做爲componentDidUpdate的第三個參數。
• 配合componentDidUpdate, 能夠覆蓋componentWillUpdate的全部用法。

class Example extends React.Component {
	getSnapshotBeforeUpdate(prevProps, prevState) {
	// ...
	}
}
複製代碼