什么是生命周期？
- 组件从创建到死亡它会经历一些特定的阶段。
- React 组件中包含了一系列钩子函数（生命周期回调函数），会在特定的时候调用。
- 我们在定义组件时，会在特定的生命周期回调函数中做特定的工作。
旧生命周期流程图
新生命周期流程图
生命周期的三个阶段
1.初始化阶段
由ReactDOM.render()触发—初次渲染
componentWillMount（已弃用）
组件将要挂载到DOM节点时触发。
作用： 初始化数据。getDerivedStateFromProps(nextProps,nextState)(新增)
第一次的初始化组件以及后续的更新过程中触发（包括自身状态更新以及父传子），返回一个对象与this.state合并作为新的state，返回null则说明不需要在这里更新state。
使用场景： 此方法适用于罕见的用例，当state的值在任何时候都取决于props时使用。
此方法无权访问组件实例，可以靠参数获得组件的属性和状体。render
初始化渲染或状态更新之后触发。只能访问this.props和this.state，不允许修改状态和DOM输出。componentDidMount
成功render并渲染完成真实DOM之后触发，可以修改DOM。
使用场景： 一般做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息等。
componentWillMount和componentDidMount都只会执行一次。
2.更新阶段
由组件内部this.setState()或父组件render触发
componentWillReceiveProps(nextProps)（已弃用）
组件将要接收新的props时触发，第一次接收props不触发。
参数：nextProps组件接收到的新的props。shouldComponentUpdate(nextProps,nextState)控制组件是否更新的阀门，必须有返回值，返回值为布尔类型。不写这个函数默认返回值为true。参数：
nextProps组件将要更新为的属性对象。nextState组件将要更新为的状态对象。
componentWillUpdate（已弃用）
组件将要更新时触发。不能修改属性和状态render
只能访问this.props和this.state，不允许修改状态和DOM输出。getSnapshotBeforeUpdate()（新增）
在最近一次渲染输出（提交到DOM节点）之前调用。
作用： 使组件能在发生更改之前从DOM中捕获一些信息。
返回值： 此生命周期的返回值将作为componentDidUpdate()的第三个参数。componentDidUpdate(prevProps,prevState，value)组件更新完毕时触发。参数：
prevProps组件更新前的属性对象。prevState组件更新前的状态对象。
3.销毁阶段
由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount
组件将要卸载时调用。
在删除组件之前进行清理操作，例如：关闭定时器、取消订阅消息、事件监听器等。
老生命周期的问题
（1）componentWillMount在ssr（服务端渲染）中 这个方法将会多次调用，所以会重复触发多次，同时在这里如果绑定事件将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。
（2）componentWillReceiveProps 外部组件多次频繁更新传入多次不同的props，会导致不必要的异步请求
（3）componentWillUpdate更新前记录DOM状态，可能会做一些处理，与componentDidUpdate相隔时间如果过长，会导致状态不可信。
react中性能优化的方案
1.shouldComponentUpdate
控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化。
例如：判断更新之前的属性和状态与将要更新的属性和状态时候一致。
2.PureComponent
PureComponent会帮你比较新props 跟 旧的props，新的state和老的state（值相等，或者对象含有相同的属性且属性值相等），来帮助你确定shouldcomponentUpdate 返回true 或者false,从而决定要不要呼叫 render function.
import React, { PureComponent } from 'react' ... export default class App extends PureComponent { ... } ...
注意：
如果你的state 或 props 【永远不会变】，那pureComponent 并不会比较快，因为shallowEqual 也需要花时间。
