react hooks遇到setTimeout

凯尔宝宝2024-01-18 15:15

在JavaScript中，setTimeout函数是异步执行的，它会在事件循环的下一个循环中执行。因此，即使通过箭头函数将当前状态值传递给setTimeout的回调函数，该回调函数仍然会在当前状态值更新之前执行。

为了避免状态获取到旧值的问题，您可以使用useRef来存储最新的状态值，并在定时器回调函数中引用它。下面是一个示例：

外链图片转存中...(img-BixVDsln-1705475499010)

在上述示例中，我们使用了useRef钩子来创建了一个名为latestValueRef的引用对象，并将其初始值设为状态值。每当状态值发生变化时，我们更新latestValueRef的值。然后，在定时器回调函数中，我们通过latestValueRef.current获取到最新的状态值。

这样，无论setTimeout回调函数何时执行，它都可以获取到最新的状态值，避免了获取到旧值的问题

当然，还有一个更适合hooks宝宝体质的写法：常见的，当我们需要一个setInterval定时器去执行相关操作时，可以利用监听state的变化来避免取到旧值的问题

外链图片转存中...(img-brSTRR5y-1705475499012)

如上，我们巧妙地使countHandle每次加1，而后监听其变化执行todo()函数，todo()内取用任何state状态都能取到最新值。

类似的，js原生监听事件(addEventListener)也会遇到一样的问题，当我们使用非react编写的第三方库时，或许会遇到这类问题。比如当我们需要监听window上的某些事件时，我们可以封装一个hooks来优雅地解决这个问题：

js 复制代码

const useWindowEvent = <K extends keyof WindowEventMap>(eventName: K, callback: (e: WindowEventMap[K]) => void) => {
    const [eventHandle, setEventHandle] = useState<WindowEventMap[K]>();

    useEffect(() => {
        window.addEventListener(eventName, (e) => {
            setEventHandle(e);
        });
    }, []);

    useEffect(() => {
        if (eventHandle) {
            callback(eventHandle);
        }
    }, [eventHandle]);
};

useWindowEvent('mousemove', ({ clientX, clientY }) => {
    onMouseMove(clientX, clientY);
});