巧用 React 中的 useRef，掌握状态管理的秘密武器
2024-02-04 14:51:13
引言
在 React 中，管理组件状态至关重要。而 useRef 是一种强大的工具，它允许你在组件中存储可变值，而无需触发重新渲染。这对于处理诸如 DOM 节点引用、表单输入、动画等场景非常有用。本文将深入解析 useRef 的使用方法，并通过示例和挑战展示其应用场景。
什么是 useRef？
useRef 是一个 React Hook，它返回一个可变的 ref 对象。ref 对象拥有一个 current 属性，可以用来存储任何值，而无需触发重新渲染。这使得 useRef 非常适合存储组件中的临时数据或函数，而不影响组件的渲染性能。
useRef 的语法
const ref = useRef(initialValue);
initialValue 可以是任何值，例如字符串、数字、对象或函数。如果省略了 initialValue，则 ref.current 初始值为 null。
useRef 的用法
useRef 的用法非常灵活。以下是一些常见的应用场景：
1. 存储 DOM 节点引用
const myRef = useRef(null);
useEffect(() => {
myRef.current.focus();
}, []);
这段代码在组件挂载后将焦点设置到具有 myRef 引用元素。
2. 管理表单输入
const inputRef = useRef('');
const handleInputChange = (e) => {
inputRef.current = e.target.value;
};
这段代码使用 useRef 来跟踪表单输入字段的值，而不触发重新渲染。
3. 存储函数
const callbackRef = useRef(() => {});
useEffect(() => {
callbackRef.current = () => {
// 这里执行回调函数逻辑
};
}, []);
这段代码使用 useRef 来存储一个回调函数，该函数可以在组件卸载之前被调用。
4. 优化动画
const animationRef = useRef(null);
useEffect(() => {
animationRef.current = requestAnimationFrame(animationLoop);
return () => {
cancelAnimationFrame(animationRef.current);
};
}, []);
这段代码使用 useRef 来存储一个动画循环，该循环在组件挂载后启动，并在组件卸载前停止。
useRef 与 useState 的区别
useRef 与 useState 是 React 中管理状态的不同方式。useRef 存储可变值，而 useState 存储反应性状态。useRef 不会触发重新渲染，而 useState 会。
一般来说，当需要存储不会影响组件渲染的数据时，应使用 useRef。而当需要存储反应性状态并触发重新渲染时，应使用 useState。
挑战
1. 构建一个自定义 React 组件，该组件使用 useRef 来存储其内部状态，并提供一个方法来更新该状态。
2. 使用 useRef 来优化一个动画组件，该组件随着时间推移移动一个元素。
3. 创建一个表单组件，该组件使用 useRef 来跟踪表单输入字段的值，并在提交时打印这些值。
结论
useRef 是 React 中管理组件状态的一个强大工具。它允许你存储可变值，而无需触发重新渲染。通过了解 useRef 的用法和应用场景，你可以提升 React 组件的性能和可维护性。
