1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello_react</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="../js/react.development.js"></script>
<script
type="text/javascript"
src="../js/react-dom.development.js"
></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<style>
.list {
width: 200px;
height: 150px;
background-color: skyblue;
overflow: auto;
}
.news {
height: 30px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
"use strict";
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(preprops, preState) {
return this.refs.list.scrollHeight;
}
componentDidUpdate(preprops, preState, height) {
this.refs.list.scrollTop += this.refs.list.scrollHeight - height;
}
render() {
return (
<div>
<div className="list" ref="list">
{
this.state.newsArr.map((value, index) => {
return (
<div className="news" key={
index}>
{
value}
</div>
);
})}
</div>
</div>
);
}
}
ReactDOM.render(<NewsList />, document.getElementById("test"));
</script>
</body>
</html>
2.代码讲解
- componentSnapshotBeforeUpdate函数必须和componentDidUpdate配套使用，如果单有componentSnapshotBeforeUpdate没有componentDidUpdate,将会有警告
- componentSnapshotBeforeUpdate有两个参数，之前的props和state
- componentSnapshotBeforeUpdate必须有返回值，返回值传给componentDidUpdate作为参数使用
- componentDidUpdate有三个参数，前面两个分别是只更新前的props和state，第三个是componentSnapBeforeUpdate的返回值
3.运行结果
