react組件生命周期 英文文檔介紹

目錄

1. 三種生命狀態(tài)
2. 八種生命周期鉤子
3. 生命周期鉤子的實(shí)際調(diào)用順序

一、 react組件的3種生命狀態(tài)

react組件具有三個(gè)生命狀態(tài)：

• Mounting 生成
• Updating 更新
• Unmounting 卸載

二、 react組件的8種生命周期鉤子

1. constructor(props) ： 組件生成前調(diào)用，繼承父類的props與上下文(context)

constructor(props, context) {
  super(props, context);    // 以繼承類的方法聲明react組件，需要調(diào)用super繼承props
  this.state = {            // 自有state（只能通過this.setState(object)進(jìn)行修改）
    color: props.initialColor
  };
}

2. componentWillMount() ： 在生成組件(mount)開始的前一瞬間觸發(fā)，在render()前被調(diào)用

3. componentDidMount() ： 在生成組件(mount)結(jié)束的后一瞬間觸發(fā)，是個(gè)調(diào)用遠(yuǎn)程數(shù)據(jù)的好位置

4. componentWillReceiveProps(nextProps) ：生成的組件在接收到新的props時(shí)調(diào)用，this.setState()不會(huì)觸發(fā)此生命鉤子

5. shouldComponentUpdate(nextProps, nextState) ： 在render()前觸發(fā)，但是不影響子組件的渲染更新；初次渲染不調(diào)用；返回false則不調(diào)用componentWillUpdate與componentDidUpdate

6. componentWillUpdate(nextProps, nextState) ： 在因接收到新的props或state導(dǎo)致的render()前一瞬間觸發(fā)；初次渲染不調(diào)用

7. componentDidUpdate(prevProps, prevState) ：update結(jié)束后立即觸發(fā)，適合在此處對(duì)更新后的DOM進(jìn)行操作；初次渲染不調(diào)用

8. componentWillUnmount() ： 在組件被卸載或銷毀后的后一瞬間觸發(fā)，常在此方法中完成清理

三、 react組件的生命周期鉤子調(diào)用順序

1. Mounting

以下方法在組件被創(chuàng)建、插入DOM時(shí)，被依次調(diào)用

• constructor()
• componentWillMount()
• render()
• componentDidMount()

2. Updating

props或state改變時(shí)，引發(fā)一次update事件，依次調(diào)用以下函數(shù)進(jìn)行重新渲染：

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

3. Unmounting

組件從DOM中移除時(shí)，調(diào)用以下方法：

• componentWillUnmount()