react（26）——滚动条固定案例，新版本生命周期函数componentSnapshotBeforeUpdate

最新推荐文章于 2023-03-05 14:21:23 发布

木子旭

最新推荐文章于 2023-03-05 14:21:23 发布

阅读量208

点赞数

分类专栏： # react 文章标签： react

本文链接：https://blog.csdn.net/qq_45895576/article/details/113656818

版权

react 专栏收录该内容

65 篇文章 5 订阅

订阅专栏

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.运行结果

在这里插入图片描述

木子旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react（26）——滚动条固定案例，新版本生命周期函数componentSnapshotBeforeUpdate

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 ty
复制链接

扫一扫