React getSnapshotBeforeUpdate() 方法

React 组件生命周期

render() 方法格式如下:

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 方法在最近一次渲染输出(提交到 DOM 节点)之前调用。

在 getSnapshotBeforeUpdate() 方法中,我们可以访问更新前的 props 和 state。

getSnapshotBeforeUpdate() 方法需要与 componentDidUpdate() 方法一起使用,否则会出现错误。

以下实例使用 getSnapshotBeforeUpdate() 方法查看更新前 state 对象的值,实例会在 1 秒延迟后显示更新前与更新后的不同值:

实例

class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: runoob};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritesite: google})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById(div1).innerHTML =
在更新前喜欢的网站是: + prevState.favoritesite;
}
componentDidUpdate() {
document.getElementById(div2).innerHTML =
更新后喜欢的网站是: + this.state.favoritesite;
}
render() {
return (
div>
h1>我喜欢的网站是 {this.state.favoritesite}h1>
div id=div1>div>
div id=div2>div>
div>
);
}
}

ReactDOM.render(Header />, document.getElementById(root));

尝试一下 »

React 组件生命周期

本文来源于互联网:React getSnapshotBeforeUpdate() 方法