介绍下react新增的两个生命周期解决的问题

1.static  getDerivedStateFromProps(nextProps,prevState){

  return {number:prevState.number*2}

}  

返回的是一个新的state

2.getSnapshotBeforeUpdate(){

return this.container.current.scrollHeight

}

//current不用多说,是一个React.createRef创造的对象。(源码)

componentDidUpdate(prevProps,nextState,prevScrollHeight){
        let nextScrollTop = this.container.current.scrollTop
        this.container.current.scrollTop = nextScrollTop + (this.container.current.scrollHeight - prevScrollHeight)
}
解决的问题就是咱们正常看消息时消息不停的增加,滚动条会动,而且界面也跟着向上动,
此时用了这个快照,我们滑动滚动条在哪,你看到的内容就在那里,但是滚动条还是会变动(无法控制,因为增加了)解决了用户体验不好的情况,在原来这个是无法解决的

 

posted @ 2021-01-21 22:17  国服第一李师师  阅读(163)  评论(0编辑  收藏  举报