useRef 钩子
useRef 是 React 提供的一个钩子函数，用于在函数组件中访问 DOM 元素或存储可变值。与 useState 不同，useRef 返回的对象在组件的整个生命周期中保持不变，且更新它不会触发组件的重新渲染。
什么是 useRef？
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（初始值）。这个对象在组件的整个生命周期中保持不变，即使组件重新渲染，ref 对象也不会被重新创建。
基本语法
javascript
const refContainer = useRef(initialValue);
initialValue：ref 对象的初始值。refContainer：返回的 ref 对象，可以通过refContainer.current访问或修改其值。
使用 useRef 访问 DOM 元素
useRef 最常见的用途是访问 DOM 元素。通过将 ref 对象传递给 JSX 中的 ref 属性，React 会将对应的 DOM 元素赋值给 ref.current。
示例：聚焦输入框
javascript
import React, { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>聚焦输入框</button>
</div>
);
}
export default FocusInput;
解释：
- 使用
useRef创建一个inputRef对象。 - 将
inputRef传递给<input>元素的ref属性。 - 点击按钮时，调用
inputRef.current.focus()使输入框获得焦点。
提示
useRef 不会触发组件重新渲染，因此适合用于存储不需要触发 UI 更新的值。
使用 useRef 存储可变值
除了访问 DOM 元素，useRef 还可以用于存储任何可变值。与 useState 不同，更新 useRef 的值不会触发组件的重新渲染。
示例：记录组件渲染次数
javascript
import React, { useRef, useEffect } from 'react';
function RenderCounter() {
const renderCount = useRef(0);
useEffect(() => {
renderCount.current += 1;
});
return <div>组件渲染次数：{renderCount.current}</div>;
}
export default RenderCounter;
解释：
- 使用
useRef创建一个renderCount对象，初始值为0。 - 在
useEffect中更新renderCount.current，每次组件渲染时增加计数。 - 由于
useRef不会触发重新渲染，计数器的更新不会导致无限循环。
警告
useRef 的值变化不会触发组件重新渲染，因此如果需要根据值的变化更新 UI，请使用 useState。
实际应用场景
1. 表单输入验证
在表单中，可以使用 useRef 存储输入框的值，并在提交表单时进行验证。
2. 动画控制
在实现动画时，可以使用 useRef 存储动画的当前状态或定时器 ID。
3. 第三方库集成
当需要与第三方库（如 D3.js 或 Three.js）集成时，useRef 可以用于存储库实例或 DOM 元素。
总结
useRef 是一个强大的工具，适用于以下场景：
- 访问和操作 DOM 元素。
- 存储可变值而不触发组件重新渲染。
- 与第三方库集成时存储实例或引用。
通过本文，你已经掌握了 useRef 的基本用法和实际应用场景。接下来，可以尝试在自己的项目中实践这些知识。
附加资源与练习
- 练习 1：创建一个组件，使用
useRef实现一个简单的计时器。 - 练习 2：修改上面的
FocusInput示例，使其在输入框中显示当前时间。 - 官方文档：React useRef 文档
备注
如果你有任何问题或需要进一步的帮助，请访问我们的社区论坛或查看官方文档。