React TypeScript Cheatsheet：useRef只读和可变引用区别详解
【免费下载链接】react 
项目地址: https://gitcode.com/gh_mirrors/reactt/react-typescript-cheatsheet
在React TypeScript开发中，useRef是一个强大但容易混淆的Hook。很多开发者不知道，useRef在TypeScript中实际上有两种完全不同的行为模式：只读引用和可变引用。本文将为你详细解析这两种用法的区别，帮助你在项目中正确使用useRef。
🤔 为什么useRef会有两种类型？
在TypeScript中，useRef返回的引用类型取决于你是否提供了类型参数以及初始值的设置方式。这直接影响了你的代码安全性和灵活性。
🔒 只读引用：DOM元素引用
当你需要访问DOM元素时，应该使用只读引用模式。这种模式下，React会完全管理.current属性的值，你不能手动修改它。
核心特点：
- 类型安全：TypeScript会确保ref.current的类型正确
- React管理：React在组件挂载和卸载时自动更新ref.current
- null初始值：必须使用
null作为初始值
基本用法：
function MyComponent() {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
// 需要检查是否为null
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return <input ref={inputRef} />;
}
非空断言（谨慎使用）：
如果你确定ref一定会被赋值，可以使用非空断言：
const inputRef = useRef<HTMLInputElement>(null!);
// 无需检查null
inputRef.current.focus();
🔄 可变引用：存储可变值
当你需要在组件生命周期中存储可变值时，应该使用可变引用模式。这种模式下，你可以自由修改.current的值。
核心特点：
- 开发者管理：你需要自己管理ref.current的值
- 跨渲染保持：值在组件重新渲染时保持不变
- 不触发重渲染：修改ref.current不会导致组件重新渲染
基本用法：
function TimerComponent() {
const intervalRef = useRef<number | null>(null);
useEffect(() => {
intervalRef.current = setInterval(() => {
console.log('Tick');
}, 1000);
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, []);
return <div>Timer is running</div>;
}
📊 两种引用类型对比表
| 特性 | 只读引用 | 可变引用 |
|---|---|---|
| 管理方 | React | 开发者 |
| 初始值 | null | 任意类型值 |
| 可修改性 | 不可修改 | 可修改 |
| 主要用途 | DOM操作 | 存储可变数据 |
| 类型安全 | 高 | 中 |
🎯 如何选择正确的引用类型？
选择只读引用的情况：
- 需要访问DOM元素（input、div等）
- 需要与第三方库集成
- 需要确保类型安全
选择可变引用的情况：
- 存储定时器ID
- 缓存计算结果
- 保存上一次的状态值
💡 实用技巧和最佳实践
- 明确类型声明：总是显式声明useRef的类型参数
- 合理使用null检查：在访问DOM引用前进行null检查
- 避免过度使用：只在必要时使用useRef
🚀 总结
掌握useRef的两种引用类型是React TypeScript开发的重要技能。只读引用适合DOM操作，提供更好的类型安全；可变引用适合存储跨渲染的数据，提供更大的灵活性。
记住这个简单规则：给元素用只读，存数据用可变。通过正确使用这两种模式，你可以编写出更安全、更高效的React TypeScript代码。
更多详细的useRef用法和示例，可以参考项目的hooks文档：docs/basic/getting-started/hooks.md
【免费下载链接】react 项目地址: https://gitcode.com/gh_mirrors/reactt/react-typescript-cheatsheet
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
