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

https://blog.csdn.net/huangpin815/article/details/80023480

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>
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

很奇怪的是： 目标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)
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

利用浏览器单线程工作的特性，保证setTimeout中的代码在re-draw完成之后执行。