React componentDidUpdate() 方法
componentDidUpdate() 方法格式如下:
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate() 方法在组建更新后会被立即调用。
首次渲染不会执行此方法。
你也可以在 componentDidUpdate() 中直接调用 setState(),但请注意它必须被包裹在一个条件语句里。
以下实例使用 componentDidUpdate() 方法在组建更新后执行,组建使用 componentDidMount() 方法会在 1 秒中后发生修改操作:
实例
class
Header
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
)
;
this
.
state
=
{
favoritesite
:
"
yssmx
"
}
;
}
componentDidMount
(
)
{
setTimeout
(
(
)
=>
{
this
.
setState
(
{
favoritesite
:
"
google
"
}
)
}
,
1000
)
}
componentDidUpdate
(
)
{
document
.
getElementById
(
"
mydiv
"
)
.
innerHTML
=
"
更新后喜欢的是
"
+
this
.
state
.
favoritesite
;
}
render
(
)
{
return
(
<
div
>
<
h1
>我喜欢的网站是
{
this
.
state
.
favoritesite
}
</
h1
>
<
div
id
=
"
mydiv
"
></
div
>
</
div
>
)
;
}
}
ReactDOM
.
render
(
<
Header
/>,
document
.
getElementById
(
'
root
'
)
)
;
尝试一下 »