1. 程式人生 > >react生命週期

react生命週期

元件的生命週期可分成三個狀態:

  • Mounting:已插入真實 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真實 DOM

生命週期的方法有:

componentWillMount 

在渲染前呼叫,在客戶端也在服務端。一般用的比較少,更多的是用在服務端渲染

1、元件剛經歷constructor,初始完資料 2、元件還未進入render,元件還未渲染完成,dom還未渲染

componentDidMount 

在第一次渲染後呼叫,只在客戶端。之後元件已經生成了對應的DOM結構,可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用,可以在這個方法中呼叫setTimeout, setInterval或者傳送AJAX請求等操作(防止非同步操作阻塞UI)。

元件第一次渲染完成,此時dom節點已經生成,可以在這裡呼叫ajax請求,返回資料setState後元件會重新渲染

componentWillReceiveProps 

在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。

shouldComponentUpdate 

返回一個布林值。在元件接收到新的props或者state時被呼叫。在初始化時或者使用forceUpdate時不被呼叫。  可以在你確認不需要更新元件時使用。

componentWillUpdate

在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫。

componentDidUpdate

 在元件完成更新後立即呼叫。在初始化時不會被呼叫。

componentWillUnmount

在元件從 DOM 中移除之前立刻被呼叫。

class Demo extends Component {
  	constructor(props, context) {
      	    //如果想(在元件其他地方是可以直接接收的)使用props或context,則需要以引數形式傳入。
      	    //只要元件存在constructor,就必要要寫super,否則this指向會錯誤
      	    super(props, context);
      	    this.state = {
          	    data: 1
      	    };
  	},
	componentWillMount () {
		// 在元件掛載之前呼叫,且全域性只調用一次。如果在這個鉤子裡可以setState,render後可以看到更新後的state,不會觸發重複渲染。
		// 該生命週期可以發起非同步請求,並setState。(React v16.3後廢棄該生命週期,可以在constructor中完成設定state)
		// 不推薦在這裡發起ajax請求,若返回資料為空,則容易造成介面空白,影響渲染效果
	},
	componentDidMount () {
		//元件第一次渲染完成,此時dom節點已經生成,可以在這裡呼叫ajax請求,返回資料setState後元件會重新渲染
	},
	componentWillReceiveProps (nextProps) {
		// 在接受父元件改變後的props需要重新渲染元件時用到的比較多
		// 通過對比nextProps和this.props,將nextProps setState為當前元件的state,從而重新渲染元件
		nextProps.data !== this.props.data && this.setState({
	        data: nextProps.data
		    },() => {
		      console.log("new data...");
	  	});

	},
	shouldComponentUpdate (nextProps, nextState) {
		// react效能優化非常重要的一環。
		// 元件接受新的state或者props時呼叫,我們可以設定在此對比前後兩個props和state是否相同,
		// 如果相同則返回false阻止更新,因為相同的屬性狀態一定會生成相同的dom樹,
		// 這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比,節省大量效能,尤其是在dom結構複雜的時候。
	},
	componentWillUpdate (nextProps, nextState) {
		// 元件初始化時不呼叫,只有在元件發生更新需要重新渲染時才呼叫
	},
	componentDidUpdate (prevProps, prevState) {
		// 元件初始化時不呼叫,元件更新渲染完成後呼叫,此時dom節點載入完成,可以獲取到dom節點。
		// react只會在第一次初始化成功會進入componentDidmount,
		// 之後每次重新渲染後都會進入這個生命週期,這裡可以拿到prevProps和prevState,即更新前的props和state。
		// 該鉤子內setState有可能會觸發重複渲染,需要謹慎判斷,否則會進入死迴圈 
	},
	render () {
	    return (
	        <div>This is Demo!</div>
	    );
	},
	componentWillUnmount () {
		// 元件將要解除安裝時呼叫,一些事件監聽和定時器需要在此時清除。
	},
	componentDidCatch (error, info) {
    	//React 16 中引入,用來 捕獲元件的錯誤。
    	//如果 render() 函式丟擲錯誤,則會觸發該函式。
    	//錯誤在渲染階段中被捕獲,但在事件處理程式中不會被捕獲。
    }
}