react实现列表向上自动滚动（二：hooks写法）

import React, { useState, useEffect, useRef } from 'react'

const MarqueeBox = (props) => {
    const [data, setData] = useState([]); //滚动的数据
    const [step, setStep] = useState(1) //滚动距离
    const [top, setTop] = useState(0) //滚动距离
    const [scrollTimer, setScrollTimer] = useState([])
    const [refObj, setRefObj] = useState(React.createRef())
    const saveCallBack = useRef()

    const callBack = () => {
        let { id } = props;
        let tbody = document.getElementById(id);
        if (!refObj.current) {
            clearInterval(scrollTimer)
        } else {
            if (refObj.current.scrollHeight - refObj.current.offsetHeight - 10 > 0) {
                let ss = top
                ss = ss + 1.5
                setTop(ss)
                setStep(top)
                tbody.scrollTo(0, top)
                if (ss >= refObj.current.scrollHeight - refObj.current.offsetHeight) {
                    setTop(0)
                    tbody.scrollTo(0, top)
                }
            } else {
                clearInterval(scrollTimer)
            }
        }
    }

    useEffect(() => {
        // 每次渲染后，保存新的回调到我们的 ref 里。
        saveCallBack.current = callBack;
        return () => { };

    });

    useEffect(() => {
        scrollTimer && clearInterval(scrollTimer)
        setData(props.data)
        initMove()
        return () => {
            scrollTimer && clearInterval(scrollTimer)
        }
    }, [props])

    /**
     * 行点击事件
     * @param {object} item 
     */
    function rowClick(item) {
        props.rowClick(item)
    }

    /**
     * 初始化滚动
     */
    function initMove() {
        let { id } = props;
        if (scrollTimer) {
            clearInterval(scrollTimer)
        }
        let tbody = document.getElementById(id);
        if (tbody) {
            const tick = () => {
                saveCallBack.current();
            };
            let tt = setInterval(tick, 90);
            setScrollTimer(tt)
        }
    }
    /**
     * 鼠标over事件
     */
    function onMouseOver() {
        scrollTimer && clearInterval(scrollTimer)
    }

    /**
     * 鼠标移出事件
     */
    function onMouseOut() {
        // scrollTop
        let { id } = props;
        let tbody = document.getElementById(id);
        setTop(tbody.scrollTop)
        initMove()
    }

    const boxStyle = {
        height: '100%',
        width: '100%',
        overflowY: "scroll"
    }
    return (
        <div className='marquee-box'
            id={props.id}
            style={boxStyle}
            ref={refObj}
            onMouseOver={onMouseOver}
            onMouseOut={onMouseOut}
            onTouchMove={onMouseOver}
            onTouchEnd={onMouseOut}
        >
            {
                data && data.map((item, index) => {
                    return (
                        <div key={index} className='list-item' onClick={() => rowClick(item)}>
                            <div className='list-item-td' title={item.originName}>{item.name1}</div>
                            <div className='list-item-td' title={item.finishName}>{item.name2}</div>
                            <div className='list-item-td' title={item.carId}>{item.id}</div>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default MarqueeBox;