getSnapshotBeforeUpdate
生命周期方法在 render
之后,在更新之前(如:更新 DOM 之前)被调用。给了一个机会去获取 DOM 信息,计算得到并返回一个 snapshot
,这个 snapshot
会作为 componentDidUpdate
的第三个参数传入。其中在更新之前调用,我在getSnapshotBeforeUpdate
log了一行为什么拿到的是更新之后的呢(代码如下)?我有点疑惑,麻烦大家帮忙解答一下,谢谢啦
import React, { Component } from 'react';
class childern extends Component {
constructor(props) {
super(props);
this.state = { };
this.i = 1
}
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps==>生命周期')
return props
}
getSnapshotBeforeUpdate(prevProps,prevState){
console.log('getSnapshotBeforeUpdate==>生命周期',this.ele)
return this.ele
}
componentDidUpdate(snap,a,b){
console.log('componentDidUpdate==>生命周期',b)
}
render() {
console.log('render==>生命周期')
return (
<div
onClick={()=>{
this.setState({a:'我是更新之后的state'})
}}>
getDerivedStateFromProps
<div ref={ele=>{ this.ele = ele }}>{this.state.a}</div>
</div>
);
}
}
export default childern;
盲猜,是打印的问题,他们用的是用一个地址空间,打印出来的变量会随程序的改变而改变,直接打断点查看状态稳一点