react 16.8更新的新的钩子函数

2022-10-28 13:18:12

 最新的生命周期删掉了三个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做处理
  }
  • 作者:rodgers VV
  • 原文链接:https://blog.csdn.net/William526/article/details/102068871
    更新时间:2022-10-28 13:18:12