react实现无限循环滚动信息

需求

后端传递过来的数据滚动显示，鼠标移入后停止滚动，鼠标移出后继续滚动，参考公司门户的公告信息栏

实现思路

思路一

在componentDidMount中定义一个定时器，每过1000ms触发一次事件，将数组中第一条数据push到数组中，再删除掉第一条数据，最后给div添加onMouEnter和onMouseLeave事件，让鼠标移入时清除定时器，鼠标移出时重新开启定时器。

代码：

class Roll extends React.Component{
  
  state = {
    list: [
      { title: '静夜思' },
      { title: '唐-李白' },
      { title: '窗前明月光' },
      { title: '疑是地上霜' },
      { title: '举头望明月' },
      { title: '低头思故乡' },
    ]
  }

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

  roll = () => {
    let arr = this.state.list;
    arr.push(this.state.list[0])
    arr.splice(0,1)
    t