（demo）使用getSnapshotBeforeUpdate 新闻条滚动展示

.list{
        width: 200px;
        height: 150px;
        background-color: skyblue;
        overflow: auto;
}
.news{
        height: 30px;
}

scrollHeight：内容区的高度 为210px

<div class="list">
        <div class="news">7</div>
        <div class="news">6</div>
        <div class="news">5</div>
        <div class="news">4</div>
        <div class="news">3</div>
        <div class="news">2</div>
        <div class="news">1</div>
</div>

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.scrollHeight - 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>
            )
    }
}