reactHooks 延迟 获取

记录一下，工作中遇到的问题 hooks 延迟获取状态

• 封装延迟获取状态的hooks

import React from 'react';
import ReactDOM from 'react-dom';

const useTimeout = (callback, delay) => {
    const savedCallback = React.useRef();
    // 用ref 存储方法，只有在回调函数重置的时候才更新
    React.useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);
    // 只有在传入时间更新的时候才会更新
    React.useEffect(() => {
        function tick() {
            savedCallback.current();
        }

        if (delay !== null) {
            let id = setTimeout(tick, delay);
            return () => clearTimeout(id);
        }
    }, [delay]);
};
const OneSecondTimer = props => {
    const [seconds, setSeconds] = React.useState(0);
    useTimeout(() => {
        console.log(seconds);
    }, 3000);

    return <p onClick={() => {
        setSeconds(seconds + 1)
    }}>按钮</p>;
};
ReactDOM.render(
    <OneSecondTimer/>,
    document.getElementById('root')
);