useRef跨渲染周期存储
React.useRef
是 React Hooks 中用于创建持久化引用的核心 API,主要用于以下场景:
一、核心特性
跨渲染周期存储
返回的 ref 对象在组件生命周期内保持不变,修改.current
属性不会触发重新渲染。const ref = useRef(initialValue); // 初始值仅首次有效
与 useState 的对比
特性 useRef useState 触发渲染 ❌ 不触发 ✅ 触发 值类型 可变引用 不可变值 适用场景 与渲染无关的持久存储 影响渲染的状态管理
二、主要应用场景
DOM 元素操作
获取输入框焦点或测量元素尺寸:const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return <input ref={inputRef} />;
缓存计算结果
存储复杂计算值避免重复渲染:const renderCount = useRef(0); useEffect(() => { renderCount.current++ });
控制副作用
管理定时器或事件监听,避免内存泄漏:const timerRef = useRef(); useEffect(() => { timerRef.current = setInterval(() => {}, 1000); return () => clearInterval(timerRef.current); }, []);
三、注意事项
- 不可作为依赖项
ref.current 变化不会触发 useEffect 的依赖更新。 - 函数组件引用限制
不能直接通过 ref 获取函数式子组件实例。 - TypeScript 类型安全
推荐明确初始值类型以避免undefined
风险。
四、性能优化建议
- 高频更新场景优先使用 useRef 替代 useState
- 复杂动画结合
react-native-reanimated
的 useAnimatedRef