React getSnapshotBeforeUpdate() 方法
React 组件生命周期
getSnapshotBeforeUpdate() 方法格式如下：
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
:
"
yssmx
"
}
;
}
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
'
)
)
;
尝试一下 »
