最新的生命周期删掉了三个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做处理
}