前端面试：[React] useRef 是如何实现的？
useRef 是 React 中一个非常有用的 Hook，它用于在组件中持久存储可变的值而不会引起重新渲染。理解 useRef 的实现原理对于更高效地使用它非常重要。以下是 useRef 的实现原理和使用场景的详细说明。
一、useRef Hook 的基本概念
- 持久引用：useRef 返回一个可变的 ref 对象，ref 的 .current 属性可以用来存储任意的值。
- 避免重新渲染：更新 ref 对象不会导致组件重新渲染，这使得它特别适合用于存储不需要引起 UI 变化的值（例如 DOM 节点、定时器 ID、外部库实例等）。
- 简单使用：
javascript
import React, { useRef } from 'react';
const MyComponent = () => {
const inputRef = useRef(null);
const focusInput = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};
二、useRef 的实现原理
在 React 的实现中，useRef Hook 是通过底层的 hook 系统来管理状态和副作用的。它的实现原理大致如下：
- 内部存储：每个组件都有一个 Hook 列表和一个状态列表。useRef 的调用会在这两个列表中增加一个新的 ref 对象。
- 调用时机：
- 当组件首次渲染时，useRef 会返回一个新的 ref 对象。
- 在后续渲染中，每次调用 useRef 时都将返回相同的 ref 对象，而不是创建新的对象。
- 内部结构：
javascript
function useRef(initialValue) {
const ref = { current: initialValue };
// 逻辑代码，存储 ref 对象
return ref;
}
这里，我们可以想象 ref 对象是一个简单的包含 .current 属性的对象。React 确保它在组件的生命周期中保持不变。
三、useRef 的典型应用场景
- 访问 DOM 元素：最常见的场景是存储对 DOM 元素的引用。
javascript
const inputRef = useRef(null);
- 保留组件状态：可以存储不想触发重新渲染的值。例如，存储定时器的 ID，或者在组件的不同生命周期中保留某些状态。
javascript
const countRef = useRef(0);
const handleIncrement = () => {
countRef.current += 1;
console.log(countRef.current);
};
- 整合第三方库：useRef 可以用来保存第三方库实例，以便在组件间共享。例如，集成图表库、动画库等。
javascript
const chartRef = useRef(null);
useEffect(() => {
// 使用 chartRef.current 进行渲染
});
四、注意事项
- 不作为状态保存：使用 useRef 存储的值改变不会触发组件的重新渲染。如果需要根据某些值改变来更新 UI，请使用 useState。
- 引用的相等性：在每次渲染中，useRef 返回的对象是相同的。所以可以在渲染中安全地传递该引用，不用担心重置。
useRef 是一个非常强大且灵活的 Hook，它主要用于访问 DOM 元素和存储不引起重新渲染的可变数据。由于它的内部实现确保了返回的 ref 对象在组件的整个生命周期内保持不变，因此它适合用于多种应用场景。通过理解其实现原理和应用场景，可以使我们在使用 React 时更加高效。