首页 > web前端 > js教程 > 正文

UseEffect 如何跳过初始渲染并仅在任何依赖项更改后触发

花韻仙語
发布: 2024-10-08 22:27:58
转载
589人浏览过

useeffect 如何跳过初始渲染并仅在任何依赖项更改后触发

希望你做得很好,我看到你对 useeffect 位有点沮丧,但别担心,让我们一起修复它并解决问题。

为什么 heppen :我的兄弟 useeffect 他非常简单:只要依赖数组中的任何值发生变化,它都会在 jsx 之后运行。但有时即使依赖数组中的数据没有改变, useeffect 也会触发。这是由于初始渲染而发生的。

解决方案:我的方法可能与你的不同,如果我犯了任何错误,请告诉我,这可行,所以让我们深入了解

第 1 步: 在我的例子中创建 2 个 userref,其组件a.tsx
我们将使用两个引用来控制初始渲染行为:

const skippedinitialrender = useref(false);
const wasinitialrender = useref(false);

第 2 步: 创建 useeffect

创客贴设计
创客贴设计

创客贴设计,一款智能在线设计工具,设计不求人,AI助你零基础完成专业设计!

创客贴设计 150
查看详情 创客贴设计
useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])
登录后复制

*第 3 步:* 在 if 语句中运行逻辑并完成

*说明:*在初始渲染期间,我们使用 settimeout 延迟执行。这确保了无论 useeffect 在初始渲染期间触发多少次(2、4 或更多),我们的逻辑都不会运行。该逻辑仅在初始渲染后依赖值再次更改时运行。

以上就是UseEffect 如何跳过初始渲染并仅在任何依赖项更改后触发的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号