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完成之后执行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。