React生命周期

生命周期简介

React组件的生命周期实际是提供给React用于将React元素构建渲染挂载到真实的Dom节点的各个时期的钩子函数。各个生命周期函数提供，使得在开发组件时可以控制各个时期执行不同的操作，如异步的获取数据等。

各个阶段生命周期

constructor()

constructor()在React组件挂载之前被调用，属于Initalization(初始化阶段)，在为React.Component实现构造函数时通常应在其他语句之前调用super();
通常React构造函数仅用于:

• 初始化组件state
• 为时间处理函数绑定事件 注意: 不能在constructor中调用this.setState(), 应为render()还未执行，DOM还未挂在成功

static getDerivedStateFromProps(nextProps, nextState)

getDerivedStateFromProps()在每次调用render之前的时候被调用，如果要更新的state的
值的话需要返回新的要组合的对象，那么state就会修改从而导致界面重新渲染，如果不需要做
处理直接返回null.

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()发生在组件更新之后（最近的一次更新），即将重新渲染页面

它可以使组件在DOM真正的更新之前获取一些信息（例如滚动信息，DOM什么的），此生命周期返回的任何值都会作为参数传递给componentDidUpdate()，如果不需要则返回null。

shouldComponentUpdate(nextProps, nextState)

当已挂载的组件的props和state更新的时候，会在重新render(渲染)之前调用该生命周期
可以根据上一个nextProps和当前的props判断是否更新组件，React.PureComponent也是利用该钩子进行浅比较进行性能优化。需要更新的话就返回true,否则返回false。
不要在shouldComponentUpdate中调用setState()，否则会导致页面无线循环渲染，导致页面崩溃

shouldComponentUpdate(nextProps, nextState) {
    console.log("组件即将更新",nextProps, nextState);
    if(nextProps.name != props.name) return true;
    return false;
  }

componentDidUpdate(prevProps, prevState, snap)

componentDidUpdate()在更新之后立即被调用，所以一开始渲染视图的时候不会被调用。

可以在此生命周期中使用setState()但一要加上条件判断，否则会导致无线渲染页面，导致内存崩溃。

componentWillUnmount()

componentWillUnmount()在组件即将被卸载的或被销毁时进行调用 此生命周期是取消网络请求，移除监听事件、清理DOM元素、清除定时器等操作的时机。

挂载时

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新时

• shouldComponentUpdate()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载时

• componentWillUnmount()