reactjs通过使用getSnapshotBeforeUpdate和componentDidUpdate生命周期方法实现滚动新闻列表保持滚动位置不变代码示例

Dear 丶 2024-02-17 13:17 5阅读 0赞

如下代码是一个React组件，包含一个滚动新闻列表的功能。通过使用getSnapshotBeforeUpdate生命周期方法和componentDidUpdate生命周期方法，可以在每次更新组件时保存和恢复滚动位置，保持滚动位置不变。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>4_getSnapShotBeforeUpdate的使用场景</title>
    	<style>
    		.list{
          
    			width: 200px;
    			height: 150px;
    			background-color: skyblue;
    			overflow: auto;
    		}
    		.news{
          
    			height: 30px;
    		}
    	</style>
    </head>
    <body>
    	
    	<div id="test"></div>
    	
    	
    	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
    	
    	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
    
    	<script type="text/babel">
    		class NewsList extends React.Component{
          
    
    			state = {
          newsArr:[]}
    
    			componentDidMount(){
          
    				setInterval(() => {
          
    					//获取原状态
    					const {
          newsArr} = this.state
    					//模拟一条新闻
    					const news = '新闻'+ (newsArr.length+1)
    					//更新状态
    					this.setState({
          newsArr:[news,...newsArr]})
    				}, 1000);
    			}
    
    			getSnapshotBeforeUpdate(){
          
    				return this.refs.list.scrollHeight
    			}
    
    			componentDidUpdate(preProps,preState,height){
          
    				this.refs.list.scrollTop += this.refs.list.scrollHeight - height
    			}
    
    			render(){
          
    				return(
    					<div className="list" ref="list">
    						{
          
    							this.state.newsArr.map((n,index)=>{
          
    								return <div key={
          index} className="news">{
          n}</div>
    							})
    						}
    					</div>
    				)
    			}
    		}
    		ReactDOM.render(<NewsList/>,document.getElementById('test'))
    	</script>
    </body>
    </html>