react中的生命周期

最新推荐文章于 2024-09-25 10:46:15 发布

在路上`

最新推荐文章于 2024-09-25 10:46:15 发布

阅读量1k

点赞数

分类专栏： React 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/qq_39490750/article/details/121908110

版权

React 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、旧的生命周期(16.8版本)

在这里插入图片描述

二、解读旧生命周期

在这里插入图片描述

三、新的生命周期(17.0.1)

在这里插入图片描述

四、新旧生命周期的区别

新的生命周期去掉了三个will钩子，分别是：componentWillMount、componentWillReceiveProps、componentWillUpdate
新的生命周期新增了两个钩子，分别是

getDerivedStateFromProps：从props中得到衍生的state

getSnapshotBeforeUpdate：在更新前拿到快照（可以拿到更新前的数据）
请添加图片描述

使用案例：固定高度的div，定时新增一行，实现在新增的时候，使目前观看的行高度不变。

<!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>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<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>