前端面试：[React] useRef 是如何实现的？

useRef 是 React 中一个非常有用的 Hook，它用于在组件中持久存储可变的值而不会引起重新渲染。理解 useRef 的实现原理对于更高效地使用它非常重要。以下是 useRef 的实现原理和使用场景的详细说明。

一、useRef Hook 的基本概念

1. 持久引用：useRef 返回一个可变的 ref 对象，ref 的 .current 属性可以用来存储任意的值。
2. 避免重新渲染：更新 ref 对象不会导致组件重新渲染，这使得它特别适合用于存储不需要引起 UI 变化的值（例如 DOM 节点、定时器 ID、外部库实例等）。
3. 简单使用：

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 系统来管理状态和副作用的。它的实现原理大致如下：

1. 内部存储：每个组件都有一个 Hook 列表和一个状态列表。useRef 的调用会在这两个列表中增加一个新的 ref 对象。
2. 调用时机：
   • 当组件首次渲染时，useRef 会返回一个新的 ref 对象。
   • 在后续渲染中，每次调用 useRef 时都将返回相同的 ref 对象，而不是创建新的对象。
3. 内部结构：

javascript

function useRef(initialValue) { 

    const ref = { current: initialValue }; 

    // 逻辑代码，存储 ref 对象 

    return ref; 

} 

这里，我们可以想象 ref 对象是一个简单的包含 .current 属性的对象。React 确保它在组件的生命周期中保持不变。

三、useRef 的典型应用场景

1. 访问 DOM 元素：最常见的场景是存储对 DOM 元素的引用。

javascript

const inputRef = useRef(null); 

1. 保留组件状态：可以存储不想触发重新渲染的值。例如，存储定时器的 ID，或者在组件的不同生命周期中保留某些状态。

javascript

const countRef = useRef(0); 

const handleIncrement = () => { 

    countRef.current += 1; 

    console.log(countRef.current); 

}; 

1. 整合第三方库：useRef 可以用来保存第三方库实例，以便在组件间共享。例如，集成图表库、动画库等。

javascript

const chartRef = useRef(null); 

useEffect(() => { 

    // 使用 chartRef.current 进行渲染 

}); 

四、注意事项

• 不作为状态保存：使用 useRef 存储的值改变不会触发组件的重新渲染。如果需要根据某些值改变来更新 UI，请使用 useState。
• 引用的相等性：在每次渲染中，useRef 返回的对象是相同的。所以可以在渲染中安全地传递该引用，不用担心重置。

useRef 是一个非常强大且灵活的 Hook，它主要用于访问 DOM 元素和存储不引起重新渲染的可变数据。由于它的内部实现确保了返回的 ref 对象在组件的整个生命周期内保持不变，因此它适合用于多种应用场景。通过理解其实现原理和应用场景，可以使我们在使用 React 时更加高效。