react组件中useRef声明的变量和let声明的变量区别

在 React 组件中，useRef 和 let 声明的变量之间存在一些关键区别，它们在生命周期、作用域以及数据持久性方面的行为不同。

1. 数据持久性

useRef：
- useRef 创建的引用在组件的整个生命周期内保持持久，不会在组件重新渲染时丢失或重置。
- ref.current 的值可以在组件多次渲染间保留和更新，而不会触发重新渲染。
let：
- 使用 let 声明的变量在每次组件重新渲染时都会被重新初始化。也就是说，let 变量的值不会在不同渲染之间保留。

2. 触发重新渲染

useRef：
- 更新 ref.current 不会触发组件的重新渲染。
- 通常用于保存 DOM 节点的引用或存储一些无需参与重新渲染流程的数据。
let：
- 修改 let 变量的值同样不会直接触发重新渲染，但由于它在每次渲染中都会被重新声明，通常无法在渲染间存储有用的状态。

3. 使用场景

useRef 常见使用场景：

访问 DOM 元素： 通过 useRef 来获取和操作 DOM，例如表单输入的焦点管理。

function TextInput() {const inputRef = useRef(null);const focusInput = () => {inputRef.current.focus();};return (<div><input ref={inputRef} type="text" /><button onClick={focusInput}>聚焦输入框</button></div>);
}

保存可变数据（类似实例变量）： 例如保存计时器 ID、前一次渲染的某个值等，而不需要触发组件重新渲染。

function Timer() {const timerId = useRef(null);const startTimer = () => {timerId.current = setInterval(() => {console.log('计时中...');}, 1000);};const stopTimer = () => {clearInterval(timerId.current);};return (<div><button onClick={startTimer}>开始计时</button><button onClick={stopTimer}>停止计时</button></div>);
}

let 常见使用场景：

存储函数内部的局部变量： 适用于一些只在当前渲染期间有效的逻辑计算。

function Counter() {let count = 0; // 每次重新渲染都会重新初始化为 0const increment = () => {count += 1;console.log(count); // 这个值会变，但不会在渲染中保留};return <button onClick={increment}>增加</button>;
}

这种情况中，如果希望持久保存计数值，就需要使用 useState，而不是单纯用 let。

4. 与 `useState` 的对比（扩展）

useRef 和 let 的行为类似，但在组件中用 useState 来声明状态变量时，变量的变化会触发重新渲染：

function Counter() {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1); // 触发组件重新渲染};return <button onClick={increment}>当前计数：{count}</button>;
}

相比之下，如果只是用 useRef，即使改变 ref.current，UI 也不会更新，因为 useRef 的变化不会触发渲染。

总结表

特性	`useRef`	`let`
数据持久性	跨渲染周期保持数据	每次渲染会重新初始化
触发组件重新渲染	不会触发	不会触发
典型用途	保存 DOM 引用或非状态性变量	临时存储当前渲染中的局部值
常见使用场景	DOM 操作、保存计时器等可变数据	函数内的计算逻辑、循环等