React的生命周期

生命周期顺序

装载过程（组件第一次在DOM树中渲染的过程）

constructor(常用) → getInitialState(v16.0已废除) → getDefaultProps(v16.0已废除)→ componentWillMound(17.0将废除)→getDerivedStateFromProps(v16.3新增，并在v16.4中升级优化了一下)→ render(必要)→componentDidMount(常用)

更新过程（当组件被重新渲染的过程，state改变或者props改变或者父组件forceUpdate引发子组件的重新渲染）

componentWillReceiveProps(v17.0中将被弃用) → getDerivedStateFromProps → shouldComponentUpdate → componentWillUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate

卸载过程（组件从DOM中删除的过程）

componentWillUnmount

错误处理(当组件发生错误的时候，用得极少)

getDerivedStateFromError(v16.6新增) -> componentDidCatch(未来将被废弃)

使用情况

componentWillMount
可以做：
1.直接使用setState改变组件状态，render的打印一次改变后的值（但是没有什么意义，还不如直接用constructor设置初始值）
2.发送Ajax请求（服务端渲染的时候）
不可做：
1.发送Ajax请求
2.执行DOM操作
原因：初始值为0,请求接口，如果是在componentWillMount的时候你的数据还不是1的话，你这时候请求数据，其实是另外开了一个线程去执行异步操作了，render函数并不会等你异步请求结果返回1才去执行render。网络差的话，你先看到0再看到突然变成1也是很正常的事。跟Vue里的created请求类似
getDerivedStateFromProps(props,state)
getDerivedStateFromProps 的存在只有一个目的：让组件在 props 变化时更新 state。
假如我在父组件只是执行了 forceUpdate 强行引发一次重新绘制，那当前组件(子组件)的getDerivedStateFromProps又会被触发吗？
一样，在v16.3中不会，但是在v16.4以上就会了。
它返回一个对象来更新状态，如果返回的是null就表示不更新任何内容
componentDidMount(常用)
可以做：
1.发送ajax请求
不可以做:
1.直接使用this.setState更新状态，这样会二次渲染（不过经常会有发送请求后，在回调函数里setState，这也是不可避免的）
仅在浏览器端执行，此时已经有了真实的dom节点，在这个阶段常用于处理接口请求，或者一些DOM操作。因为有些组件的启动动作是依赖DOM的，例如动画等。
需要注意的是：可以在这里发送异步请求，在回调函数里调用setState设置state。但是尽量不要在这里直接调用setState()设置状态。因为会触发一次额外的重新渲染，可能造成性能问题。
shouldComponentUpdate(nextProps, nextState):(如果你对性能有更极致的要求，水平没达到一定高度就不要去动它了)（谨慎使用）
当前组件setState()会调用；
父组件props改变会调用；
父组件通过forceUpdate重新执行render，不会调用当前组件的shouldComponentUpdate；
这个方法主要是为了性能优化而设计的，考虑使用内置的PureComponent,而不是自己在这个函数里写比较，更不建议在这个组件里使用JSON.stringify去深度检查，效率非常低。
这里返回一个布尔值，默认都返回的true, 如果返回false，那这个生命周期后面的更新阶段的生命周期都不会执行了。
componentWillUpdate(nextProps, nextState):（即将在v17.0中被弃用，不用）（以前项目中常用）
它可以做的，不要做的同componentWillMount一样
当前组件setState()会调用；
父组件props改变会调用；
父组件通过forceUpdate重新执行render，也会调用当前组件的shouldComponentUpdate；
其实和componentWillMount类似，
这个方法也应该尽量避免使用，将要被遗弃。几乎用不上。应该都统一到componentDidUpdate中去处理。
getSnapshotBeforeUpdate(prevProps, prevState)：
setState(),props发生改变，父组件重新render都会调用。发生在更新状态的render之后，这时候已经可以读取dom了。通常用于处理滚动位置的聊天线程等UI中。
和getDerivedStateFromProps一样它返回一个对象来更新状态，如果返回的是null就表示不更新任何内容

componentDidUpdate(prevProps, prevState):
它可以做的，不要做的同componentDidUpdate一样

setState(),props发生改变，父组件重新render都会调用。这个方法相对用得也比较多。同componentDidMount处理事件函数类似，如果组件被更新的时候，原有的内容被重新绘制后可能也需要再次处理事件函数。

componentDidUpdate(prevProps, prevState) {
  if(prevProps.oneProp !== this.props.oneProp) {
    // 如果有变化，在这里做一些异步请求，可能会在异步请求的回调函数里setState
    // 不要直接去执行this.setState
  }
}

componentWillUnmount():
当react组件要从dom树上删除掉的时候，这个方法就会被调用。
如果在componentDidMount中使用非React的方法创造了一些DOM元素，如果撒手不管可能会造成内存泄漏，那就需要在componentWillUnmount中把这些创造的DOM元素清理掉。
应用场景：清理定时器，关闭socket, 清除监听器等

import React, { Component } from "react";

export default class LifeCycle extends Component {
  state = {
  
  }
  static getDerivedStateFromProps(props, state) {
  
  }  
  componentDidMount = () => {

  }  
  shouldComponentUpdate = (nextProps, nextState) => {

  }
  getSnapshotBeforeUpdate = (prevProps, prevState) => {

  }
  componentDidUpdate = (prevProps, prevState) => {
    
  }
  componentWillUnmount = () => {
    
  }
  render() {
    return (
      <div>
        
      </div>
    )
  }
}