React.js的Liftcycle componentDidUpdate实际上并没有“更新了吗？”

Question

我想访问DOM元素的属性scrollTop，并在生命周期componentDidUpdate中设置其值。

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

控制台的结果是0和0。

似乎DOM元素（this.messageListRef）没有完全呈现。

解决方案是使用setTimeout。控制台的结果是0和100

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

我知道setTimeout和Browser的原理是在单线程的模型中，这是setTimeout工作原因的一部分。

即使在componentDidUpdate的生命周期中，浏览器也似乎正在使用一些渲染工作。它在做什么？