react 16.8更新的新的钩子函数

 最新的生命周期删掉了三个will方法，新增了两个get方法：

delete:componentWillMount,componentWillReceiveProps,componentWillUpdate,

add:static getDerivedStateFromProps, 

 

static getDerivedStateFromProps(）这个钩子函数，在挂载，更新时都会被调用,这是个静态方法，不可用this！！！切记

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(
      nextProps,
      prevState
    )
    if (nextProps.age >= 18) {
      return {
        title: `我${nextProps.age}岁了，我成年啦！！！`
      }
    }
    return {
      ...prevState,
      title: `我${nextProps.age}岁了，我还是小孩子！！！`
    }
  }
//第一个参数nextProps，是父组件传递最新的props,
//第二个参数prevState，是自己内部state，上次的state
//里面可以做之前componentWillReceiveProps里面的所有处理，
//例如这里是父组件传递的age值如果大于等于18岁，就显示成年了，false就显示小孩子
//如果不想更新state，可以直接return null

getSnapshotBeforeUpdate()
getSnapShotBeforeUpdate(prevProps, prevState)
这个方法在 render() 之后，componentDidUpdate() 之前调用。

两个参数 prevProps 表示更新前的 props，prevState 表示更新前的 state。

返回值称为一个快照（snapshot），如果不需要 snapshot，则必须显示的返回 null —— 因为返回值将作为 componentDidUpdate() 的第三个参数使用。所以这个函数必须要配合 componentDidUpdate() 一起使用。

这个函数的作用是在真实 DOM 更新（componentDidUpdate）前，获取一些需要的信息（类似快照功能），然后作为参数传给 componentDidUpdate。例如：在 getSnapShotBeforeUpdate 中获取滚动位置，然后作为参数传给 componentDidUpdate，就可以直接在渲染真实的 DOM 时就滚动到需要的位置。

  componentDidUpdate(prevProps, prevState, snapshot) {
   //在这里可以根据更新后拿到更新前传递的参数snapshot做处理
  }