React 框架中 getSnapshotBeforeUpdate 函数应用

React 框架中getSnapshotBeforeUpdate() {}  函数应用

1: 
<style>
 .list {
   width: 200px;
   height: 150px;
   background: aqua;
   overflow: auto;  // 加上滚动条
  }
  .news {
    height: 30px; // 设置每一条高度
  }
</style>

<script type="text/babel">  // 使用babel 语法就是将jsx 语法转化为js 语法
  // 使用类创建组件
  class NewsList extends React.Component {
    // 定义一个初始化状态
    state = {newsList: []};
    // 组件挂载之后
    componentDidMount() {
      setInteraval(()=> {
        // 获取原来数据
        let { newsList } = this.state;
        // 新的新闻
        let news = "新闻" + (newsList.length + 1);   // 先计算后边再和前边进行拼接
        // 更新状态
        this.setState({newsList: [news, ...newsList]})
      }, 1000)
    }
    // 当前看到的内容固定不动： 就是需要重新计算srollTop 的高度;
    getSnapshotBeforeUpdate() {
       // 组件更新之前的高度
       this.oldheight = this.refs.list.scrollHeight; 
       return oldheight;
    }
      / 组件更新完成钩子函数
    componentDidUpdate(oreProps, preState, oldheight) {
      // 组件更新之后高度
      this.newheight = this.refs.list.scrollHeight; 
      // scrollTop 需要改变的值
      this.refs.list.srcollTop += newHeight - oldHeight;
    }
  

    render () {
      return {
        <div className="list" refs="List">
          {
            this.state.newList.map((news， index)=> {
              return <div className="news" key={index}></div>
            })
          }
        </div>
      }
    }
  }

  // 渲染组件到页面
  ReactDOM.render(<Newslist/>, getEelementById('test'))
</script>

React 框架中新的生命周期函数总结：

 一：初始化阶段： 由ReactDOM.render()  触发--- 初次渲染
 1： constructor: 构造器函数
  
 2:  getDerivedStateFromProps() ===> 函数

 3:  render() {}  渲染函数, 比不可少, 必须要用, 渲染组件

 4: componentDidMount()  ===> 常用 (开启监听, 一般发送ajax 数据请求)

 二：更新阶段:  有组件内部this.setState() 或者父组件的render() 方法触发
    1: getDerivedStateFromProps()
    2: shouldComponentUpdate()   组件是否应该更新(疑问句)  默认返回为true
    3: render() 函数  ===> 比不可少, 必须要用, render() 渲染函数
    4: getSnapshotBeforeUpdate() {} 
    5: componentDidUpdata()  // 组件更新之后

 三: 卸载组件: 由ReactDOM.unmountComponentAtNode() 触发;
    1: componentWillUnMount() ====> 常用  一般在这个钩子函数中做一些收尾的事情, 例如: 关闭定时器, 取消订阅消息。