在React的componentDidUpdate阶段，浏览器的渲染工作并没有结束

最新推荐文章于 2025-06-27 09:38:01 发布

阿超就是我

最新推荐文章于 2025-06-27 09:38:01 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/huangpin815/article/details/80023480

react 专栏收录该内容

1 篇文章

订阅专栏

本文揭示了在React组件的componentDidUpdate生命周期中，浏览器的渲染工作并未完成，导致直接设置DOM元素属性可能无效。作者通过一个深坑案例，解释了为何在该阶段设置的scrollTop属性无法生效，并提出利用setTimeout来确保代码在重新绘制完成后执行的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 一个深坑

4月第一文。

最近在React实践之中踩了很多深坑。先说下面这个深坑：

Liftcycle componentDidUpdate of React.js is not really updated did? [duplicate]

在这之前，我自认为对React的lifecycle已经有了足够的了解。但，事实证明我错了。

下面这几行的代码的目地是：访问并设置一个DOM element的值。

componentDidUpdate(prevProps) {
   console.log(this.messageListRef.scrollTop) // 0
   this.messageListRef.scrollTop = 100
   console.log(this.messageListRef.scrollTop) // 0
}

render(){
  render ...
    <div
       className={styles.messageList}
       ref={(el) => { this.messageListRef = el }}
       onScroll={this.listenScrollEvent}
    >
       <MessageList messageList={messageList} />
    </div>
}

很奇怪的是：目标DOM element可以被访问到，但是设置value却失效了。这是为什么呢？

我们知道，在React的生命周期里，有个render阶段。这个阶段的作用是将virtual DOM的变化映射到真实DOM上。但是redraw的工作并没有完成，比如渲染出滚动条。这部分工作要在componentUpdateDidUpdate之后做。

在componentDidUpdate阶段，messageList没有渲染出滚动条。所以，DOM element可以被访问到，但是设置scrollTop属性的value值却是无效的。

2 setTimeout

解决方法是setTimeout：

componentDidUpdate(prevProps) {
   console.log(this.messageListRef.scrollTop) // 0
   setTimeout(() => {
     this.messageListRef.scrollTop = 100
     console.log(this.messageListRef.scrollTop) // 100
   }, 0)
}