useRef跨渲染周期存储

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

一、核心特性

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

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

2. ‌与 useState 的对比‌

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

二、主要应用场景

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‌