React implements infinite loop scrolling information

class Roll extends React.Component{
  
  state = {
    list: [
      { title: 'Quiet Night Thoughts' },
      { title: 'Tang-Li Bai' },
      { title: 'Bright moonlight in front of the window' },
      { title: 'I think it's frost on the ground' },
      { title: 'Look up at the bright moon' },
      { title: 'Looking down and thinking of my hometown' },
    ]
  }

  componentWillMount = () => {
    this.begin()
  }

  roll = () => {
    let arr = this.state.list;
    arr.push(this.state.list[0])
    arr.splice(0,1)
    this.setState({
      list: arr,
    })
    console.log(this.state.list);
  }

  begin = () => {
    this.timer = setInterval(() => {
      this.roll()
    }, 1000);
  }

  stop = () => {
    clearInterval(this.timer)
  }

  render () {
    return (
      <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'>
        {this.state.list.map(item => {
          return (
            <p>
              {item.title}
            </p>
          )
        })}
      </div>
    )
  }
}

class Roll extends React.Component{

  state = {
    list: [
      { title: 'This is message 1' },
      { title: 'This is message 2' },
      { title: 'This is message 3' },
      { title: 'This is message 4' },
      { title: 'This is message 5' },
      { title: 'This is message 6' },
      { title: 'This is message 7' },
      { title: 'This is message 8' },
      { title: 'This is message 9' },
    ],
    count: 0,
  }

  // Start the timer when the page is mounted componentDidMount = () => {
    this.begin()
  }

  // Timer begin = () => {
    this.timer = setInterval(() => {
      this.Roll()
    }, 10);
  }

  // Turn off the timer stop = () => {
    clearInterval(this.timer)
  }

  // Each time the offset is 0.5px, use state to store the number of offsets Roll = () => {
    this.setState({
      count: this.state.count+1
    })
    this.refs.roll.style.top = -0.5*this.state.count+'px';
    // When the offset reaches 40px, cut the first data in the array to the end of the array, and then subtract the number of offsets corresponding to the height of a row if(-0.5*this.state.count <= -40){
      let arr = this.state.list;
      arr.push(this.state.list[0])
      arr.splice(0,1);
      this.setState({
        list: arr,
        count: this.state.count - 50,
      })
      this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px'
    }
    
  }

  render(){
    return (
      <div className="box" onMouseEnter={this.stop} onMouseLeave={this.begin}>
        <div className="content" ref='roll'>
          {this.state.list.map((item)=>{
            return (
              <p className='row'>
                <a href="#" rel="external nofollow" >
                  {item.title}
                </a>
              </p>
            )
          })}
        </div>
      </div>
    )
  }
}

.box{
  width: 300px;
  height: 160px;
  border: 1px solid black;
  margin: 200px 300px;
  position: relative;
  overflow: hidden;
}

.content{
  position: absolute;
  top: 0px;
}

.row{
  height: 20px;
  margin: 5px auto;
}

componentDidMount = () => {
        console.log(this.refs.test);
    }

    render () {
        return (
            <div ref='test'>
                123
            </div>
        )
    }

componentDidMount = () => {
    console.log(ReactDom.findDOMNode(this));
  }

  render () {
    return (
      <div className='test'>
        123
      </div>
    )
  }