react hooks遇到setTimeout

在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);
});
相关推荐
今天不要写bug4 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优7 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k100867 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐7 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.8 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
叫我阿柒啊8 分钟前
Java全栈开发面试实战:从基础到微服务的完整技术栈解析
java·spring boot·微服务·前端框架·vue·jwt·全栈开发
一只小风华~12 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库