有大用途的useRef

function App() {
    const box = useRef();
    return (
        <div ref={box}>
            <button onClick={() => console.log(box)}>点击获取div</button>
        </div>
    )
}
复制代码

/**
 * @description: 组件挂载完成之后开启一个循环定时器，使用useRef的保存数据功能
 *               不会随着组件的更新而丢失数据
 * @param {*}
 * @return {*}
 */
function App() {
    const [count,setCount] = useState(0)
    const timeId = useRef;
    useEffect(() => {
        timeId.current = setInterval(() => {
            setCount(count => count + 1);
        },1000)
    }, []);
    const handleSetInterval = () => {
        clearInterval(timeId.current)
    }
    return (
        <div>
            <h1>当前求和为{count}</h1>
            <button onClick={handleSetInterval}>点我清除定时器</button>
        </div>
    )
}
复制代码