当前位置: 首页 > news >正文

useRef跨渲染周期存储

React.useRef 是 React Hooks 中用于创建持久化引用的核心 API,主要用于以下场景:

一、核心特性

  1. 跨渲染周期存储
    返回的 ref 对象在组件生命周期内保持不变,修改 .current 属性不会触发重新渲染‌。

    const ref = useRef(initialValue); // 初始值仅首次有效

  2. 与 useState 的对比

    特性useRefuseState
    触发渲染❌ 不触发✅ 触发
    值类型可变引用不可变值
    适用场景与渲染无关的持久存储影响渲染的状态管理

二、主要应用场景

  1. DOM 元素操作
    获取输入框焦点或测量元素尺寸‌:

    const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return <input ref={inputRef} />;

  2. 缓存计算结果
    存储复杂计算值避免重复渲染‌:

    const renderCount = useRef(0); useEffect(() => { renderCount.current++ });

  3. 控制副作用
    管理定时器或事件监听,避免内存泄漏‌:

    const timerRef = useRef(); useEffect(() => { timerRef.current = setInterval(() => {}, 1000); return () => clearInterval(timerRef.current); }, []);

三、注意事项

  1. 不可作为依赖项
    ref.current 变化不会触发 useEffect 的依赖更新‌。
  2. 函数组件引用限制
    不能直接通过 ref 获取函数式子组件实例‌。
  3. TypeScript 类型安全
    推荐明确初始值类型以避免 undefined 风险‌。

四、性能优化建议

  • 高频更新场景优先使用 useRef 替代 useState‌
  • 复杂动画结合 react-native-reanimated 的 useAnimatedRef‌
http://www.dtcms.com/a/273022.html

相关文章:

  • 数据结构 --- 队列
  • 10.Docker安装mysql
  • chatgpt是怎么诞生的,详解GPT1到GPT4的演化之路及相关背景知识
  • dexie 前端数据库封装
  • 使用快捷键迅速校准多个通道 | IPEmotion
  • 软件技术:柯里化
  • 《PyQt6-3D应用开发技术文档》
  • 仿豆包智能输入框实现
  • python基础25_某大网校(下)处理json数据以及保存题库
  • 安全访问云端内部应用:用frp的stcp功能解决SSH转发的痛点
  • Linux驱动开发(platform 设备驱动)
  • 老题新解|矩阵转置
  • AI驱动的业务系统智能化转型:从非结构化到结构化的智能转换
  • 【STM32 学习笔记】FLASH闪存
  • pytorch学习-12循环神经网络(基础篇)
  • 机器视觉之激光码检测系统
  • 【世纪龙科技】学测-汽车信息化综合实训考核平台(机电方向)
  • 数字孪生系统如何助力汽车零部件企业实现虚拟智控
  • RedisJSON 内存占用剖析与调优
  • Lua嵌入式爬虫实现步骤
  • 【Linux系统】冯诺依曼体系结构 | 初识操作系统
  • 生产者、消费者问题(C语言、POSIX)
  • 测试覆盖标准-条件覆盖-短路求值
  • 全新开源AI知识库系统!PandaWiki一键构建智能文档,支持AI问答、创作与搜索!
  • [特殊字符] 05_Jenkins 部署前端项目实现自动化部署
  • rv1106使用笔记
  • 【RL-VLM-F】算法框架图绘图学习笔记
  • ubuntu server配置静态IP
  • ​​​​​​​微软PowerBI PL-300认证考试报名入口及费用
  • 【PTA数据结构 | C语言版】顺序队列的3个操作