react 16 生命周期

• constructor：初化生命周期函数
  1.在这个生命周期函数里面，可以定义当前组件需要的一些状态，通过this.state = { }来定义状态
  2.当前生命周期必须使用super这个方法，否则会报错；当前组件的状态必须定义在this.state里面
  3.super( )：用来实现继承
• getDerivedStateFromProps
  1.替代原有的componentWillReceiveProps
  2.将传入的 props映射到state上
  3.每次re-rendering之前被调用
  4.即使你的props没有任何变化，而是state发生了变化，导致组件发生了re-render，这个生命周期函数依然会被调用
  5.需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。

 static getDerivedStateFromProps(props, state) {
    const { pathname } = state;
    if (props.location.pathname !== pathname) {
      return {
        pathname: props.location.pathname,
        openKeys: getDefaultCollapsedSubMenus(props),
      };
    }
    return null;
  }

• render：渲染
  1.render函数用来渲染虚拟DOM，其实就是讲真实的js对象与数据相结合生成真正的DOM
  2.render函数什么时候会执行？当this.state或者this.props的数据发生改变的时候那么render函数就会执行
  3.render函数第一次执行的时候会将渲染的结果保存在缓存中，当this.state 或者 this.props发生改变的时候，那么render函数就会再次执行，这次执行的时候会将上一次的缓存结果，和这一次渲染的结果进行对比，比较哪一个虚拟DOM节点发生了改变，找到这个节点后会重新渲染这个节点而不是虚拟DOM,像这样的对比方式叫做diff算法，当渲染完毕以后会将这次的结果再次保存在缓存之中
• componentDidMount：挂载后（插入 DOM 树中）立即调用
  1.当render函数执行完毕后，也就是虚拟DOM和数据结合完毕以后生成了真实的DOM结果，在这个声明周期函数里面我们可以获取到真是的DOM，同时也可以在当前的生命周期函数中进行ajax请求。
• componentWillUnmount：销毁
  1.当组件被隐藏的时候就会被销毁掉，可以在这个生命周期里面将事件绑定的函数进行解绑等操作
• shouldComponentUpdate：dom是否开始改变（里面接收两个新值，一个是新的props，一个是新的state）
  1.如果this.state 或者 this.props发生改变的时候这个生命周期函数就回去执行
  2.当前生命周期函数必须要返回一个布尔值，如果返回true则进行更新，下面的生命周期数会执行；否则不更新，不执行。
  3.我们可以进行数据的对比来决定当前的虚拟DOM是否需要更新，可以提高性能。我们可以在当前的声明周期函数里面进行性能的优化
  4.当前生命周期函数判断的不是数据是否需要更新，而是DOM是否需要更新，哪怕在当前的生命周期函数中return false，this.state 或者 this.props里面的数据也会发生改变，只不过return false 时不会执行下面的生命周期函数了
• getSnapshotBeforeUpdate
  1.执行于render 方法之后，真实 DOM 更新之前
  2.使用方法类似于getDerivedStateFromProps，需要return
  3.返回值为componentDidUpdate的第三个参数
  4.可以获取到更新前后的state和props

getSnapshotBeforeUpdate(prevProps, prevState) {
	return 'hello world'
}

• componentDidUpdate
  1.当前生命周期函数是更新完毕，在这里我们可以获取最新的一些DOM结构。也可以看到更新后最新的一些数据
  2.在当前生命周期函数里面接受到3个参数 一个是旧的props 一个是旧的state，一个是getSnapshotBeforeUpdate返回的值

  如有不对，欢迎指出，在此感谢^_