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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!