如上图：
生命周期指的是组件实例从创建到销毁的流程，函数组件没有生命周期，只有类组件才有，因为只有class组件会创建组件实例
组件的生命周期可以分为挂载、更新、卸载阶段
挂载
constructor 可以进行State和props的初始化，constructor就是类的构造函数，然后就会调用getState,然后调用render钩子，render之后就去更新真实的DOM，最后会去调用ComponentDidMount，意思是如果代码在ComponentDidMount里面说明你的节点已经出现在真实DOM里面了
挂载的时候有四个钩子：constructor，getState，render，ComponentDidMount
更新
当组件的props或state变化会触发更新
- 更新由不同的元素触发，比如你给这个组件新的属性new props，他会触发 ;
- 或者你调用这个组件的setState()，他也会更新 ;
- 你调用这个组件的forceUpdate()也会更新，不同的更新走的流程是不一样的
- props或setState的更新是一样的，传props或者setState触发的第一个钩子是getDerivedStateFromProps ;
- 第二个钩子是shouldComponentUpdate,第三个是render，第四个是getSnapshotBeforeUpdate,第五个就是componentDidUpdate ;
- 实际上只需要记getDerivedStateFromProps，还有render ;
- shouldComponentUpdate在render之前，返回true就render，返回false就不render ;
- getSnapshotBeforeUpdate在render之后，意思是在更新DOM之前，你可以拿到之前的DOM，逻辑就是要先render才能拿到虚拟DOM
卸载
componentWillUnmount 组件从DOM中被移除的时候调用。翻译为卸载时间
总结来说：
- 挂载时调用 constructor，更新时不调用
- 更新时调用 shouldComponentUpdate 和 getSnapshotBeforeUpdate，挂载时不调用
- should... 在 render 前调用，getSnapshot... 在 render 后调用
- 请求放在 componentDidMount 里
请求为什么放在componentDidMount 里
- 因为constructor不能放Ajax请求，因为他会在SSR的时候被调用，也就是在服务器端被调用，服务器端是拿不到数据的
- 不能放进render里面，因为把数据请求写在render里面有可能会触发无限调用或者多余的数据请求
- 第三不能放componentWillUnmount，因为快消亡了，放这里也没有意义
