介绍下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)
}
解决的问题就是咱们正常看消息时消息不停的增加,滚动条会动,而且界面也跟着向上动,
此时用了这个快照,我们滑动滚动条在哪,你看到的内容就在那里,但是滚动条还是会变动(无法控制,因为增加了)解决了用户体验不好的情况,在原来这个是无法解决的
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步