react生命周期分为三个阶段：挂载、更新、卸载，16版本之后废弃了三个生命周期，在严格模式下使用将会报错。函数组件写法中将不再使用这些生命周期，转而用hooks代替
1、挂载阶段（按执行时间先后排列）
constructor( ) {}
执行时间：组件初始化时执行
用途：一般会在其中初始化state以及绑定事件函数
注意：constructor中必须调用super(props)，React.component需要初始化内部状态和方法，ES6子类必须在constructor中调用super才能使用this，props传值可以将props参数挂载到实例上。
static getDerivedStateFromProps(props, state) {}
执行时间：组件第一次挂载与后续更新时执行
用途：根据props更新state
注意：因为是静态方法，所以内部不能使用this，参数props为更新后的state，参数state为更新前的state，返回一个对象且与state合并，若与state中的变量重名，则覆盖该重名变量，返回null机位不更新state
render( ) {}
执行时间：渲染dom时执行
注意：必须返回jsx
componentDidMount( ) {}
执行时间：组件挂载后立即执行
用途：操作dom，发起网络请求
注意：在该生命周期调用setstate时，会导致额外渲染
2、更新阶段（按执行时间先后排列）
static getDerivedStateFromProps(props, state) {}
同挂载阶段的getDerivedStateFromProps
shouldComponentUpdate( ) {}
执行时间：更新前执行
用途：通过返回true/false控制dom是否更新，根据场景返回false有利于性能优化
注意：默认返回true
render( ) {}
同挂载阶段的render
getSnapshotBeforeUpdate(prevProps, prevState) {}
执行时间：render执行后（生成新的虚拟dom），页面渲染dom之前执行
用途：操作dom，如使滚动条回滚到之前的位置
注意：prevProps代表更新后的props，对比this.props，prevState代表更新后的state，对比this.state，返回参数至componentDidUpdate
componentDidUpdate( ) {}
执行时间：更细后立即执行，首次渲染时不执行
用途：操作dom，修改state，请求接口
注意：调用setState时需包含在条件语句中，否则会导致死循环
3、卸载阶段
componentWillUnmount( ) {}
执行时间：组件销毁前执行
用途：清除定时器，移除事件监听
注意：不应调用setstate
4、16版本后废弃的生命周期
componentWillMount()
componentWillReceiveProps()
componentWillUpdate()
此三个生命周期在非严格模式下需要加UNSAFE_前缀才能使用，在严格模式下报错
5、函数组件中代替生命周期的hooks
|--------------------------|--------------------------------------------|
| 生命周期 | hooks |
| componentDidMount | useEffect(() => {}, \[\]) |
| componentDidUpdate | useEffect(() => {}, deps) |
| componentWillUnmount | useEffect(() => { return cleanup }, \[\]) |
| shouldComponentUpdate | React.memo + useMemo / useCallback |
| getDerivedStateFromProps | 组件内直接根据 props 设置 state |