React组件的生命周期与调用历程

react组件生命周期 英文文档介绍

目录

1. 三种生命状态
2. 八种生命周期钩子
3. 生命周期钩子的实际调用顺序

一、 react组件的3种生命状态

react组件具有三个生命状态：

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

二、 react组件的8种生命周期钩子

1. constructor(props) ： 组件生成前调用，继承父类的props与上下文(context)

constructor(props, context) {
  super(props, context);    // 以继承类的方法声明react组件，需要调用super继承props
  this.state = {            // 自有state（只能通过this.setState(object)进行修改）
    color: props.initialColor
  };
}

2. componentWillMount() ： 在生成组件(mount)开始的前一瞬间触发，在render()前被调用

3. componentDidMount() ： 在生成组件(mount)结束的后一瞬间触发，是个调用远程数据的好位置

4. componentWillReceiveProps(nextProps) ：生成的组件在接收到新的props时调用，this.setState()不会触发此生命钩子

5. shouldComponentUpdate(nextProps, nextState) ： 在render()前触发，但是不影响子组件的渲染更新；初次渲染不调用；返回false则不调用componentWillUpdate与componentDidUpdate

6. componentWillUpdate(nextProps, nextState) ： 在因接收到新的props或state导致的render()前一瞬间触发；初次渲染不调用

7. componentDidUpdate(prevProps, prevState) ：update结束后立即触发，适合在此处对更新后的DOM进行操作；初次渲染不调用

8. componentWillUnmount() ： 在组件被卸载或销毁后的后一瞬间触发，常在此方法中完成清理

三、 react组件的生命周期钩子调用顺序

1. Mounting

以下方法在组件被创建、插入DOM时，被依次调用

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

2. Updating

props或state改变时，引发一次update事件，依次调用以下函数进行重新渲染：

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

3. Unmounting

组件从DOM中移除时，调用以下方法：

• componentWillUnmount()