React中将一直增加消息的滚动框保持在当前浏览的位置

import React, { PureComponent } from "react";

export default class SnapshotSample extends PureComponent {
  state = {
    messages: []
  };
  // 添加消息的方法
  handleNewMessage() {
    this.setState((prev) => ({
      messages: [`msg ${prev.messages.length}`, ...prev.messages]
    }));
  }

  componentDidMount() {
    // 初始化10条消息
    for (let i = 0; i < 10; i++) {
      this.handleNewMessage();
    }
    // 每隔一秒来增加一条消息，最多200条消息
    this.interval = window.setInterval(() => {
      if (this.state.messages.length > 200) {
        window.clearInterval(this.interval);
        return;
      }
      this.handleNewMessage();
    }, 1000);
  }
  // 卸载时清除定时器
  componentWillUnmount() {
    window.clearInterval(this.interval);
  }
  // 更新前获取当前的滚动高度
  getSnapshotBeforeUpdate() {
    return this.rootNode.scrollHeight;
  }
  // 将滚动的高度重新计算赋值
  componentDidUpdate(prevProps, prevState, prevScrollHeight) {
    const scrollTop = this.rootNode.scrollTop;
    if (scrollTop < 5) {
      return;
    }
    // 将滚动高度加上一个变化后的页面高度
    this.rootNode.scrollTop = scrollTop + (this.rootNode.scrollHeight - prevScrollHeight);
  }

  render() {
    return (
      <div
        style={{
          overflow: "auto",
          height: "100px",
          widows: "300px",
          border: "1px solid #eee",
          padding: "20px"
        }}
        // 将当前引用赋值给rootNode
        ref={(node) => (this.rootNode = node)}
      >
        {this.state.messages.map((msg) => (
          <div>{msg}</div>
        ))}
      </div>
    );
  }
}