目錄
- 三種生命狀態(tài)
- 八種生命周期鉤子
- 生命周期鉤子的實(shí)際調(diào)用順序
一冲泥、 react組件的3種生命狀態(tài)
react組件具有三個生命狀態(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ā)仑荐，是個調(diào)用遠(yuǎn)程數(shù)據(jù)的好位置
4. componentWillReceiveProps(nextProps) ：生成的組件在接收到新的props時調(diào)用码俩，this.setState()不會觸發(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ā)著瓶，適合在此處對更新后的DOM進(jìn)行操作；初次渲染不調(diào)用
8. componentWillUnmount() ： 在組件被卸載或銷毀后的后一瞬間觸發(fā)啼县，常在此方法中完成清理
三蟹但、 react組件的生命周期鉤子調(diào)用順序
1. Mounting
以下方法在組件被創(chuàng)建、插入DOM時谭羔，被依次調(diào)用
- constructor()
- componentWillMount()
- render()
- componentDidMount()
2. Updating
props或state改變時华糖，引發(fā)一次update事件，依次調(diào)用以下函數(shù)進(jìn)行重新渲染：
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
3. Unmounting
組件從DOM中移除時瘟裸，調(diào)用以下方法：
- componentWillUnmount()
