编辑
2024-01-29
React
00

目录

基本使用
实现原理
最佳实践
总结

本文将重点介绍useRef这个Hook,它可以让你在组件的整个生命周期中访问一个可变的引用对象。

useRef的主要用途是直接访问DOM子元素,但这并不是它的唯一用途。useRef也可以用来保存一个在不同渲染中不变的可变值,例如在使用一些非React的外部库时很有用。本文将介绍useRef的基本使用,实现原理,最佳实践和一些常见的问题。

基本使用

要在组件中创建一个新的引用,可以使用以下代码:

js
// 创建一个引用 const yourRef = useRef();

你也可以选择用一个默认值来初始化它,只需将它作为参数传递给useRef即可:

js
// 创建一个引用 const yourRef = useRef('hello world');

useRef是一个Hook,因此只能在函数组件中使用!

要获取和设置引用的值,你可以访问对象的.current属性,如下所示:

js
// 创建一个引用 const exampleRef = useRef(); // 设置引用的值 exampleRef.current = "Hello World"; // 访问引用的值: // 这会在控制台打印"Hello World" console.log(exampleRef.current);

要访问一个DOM元素,你可以创建一个引用,然后使用它的ref属性将它分配给你想要目标的DOM元素,然后你就可以使用它了。

例如,假设你想要获取一个DOM元素的像素高度。要做到这一点,你必须访问DOM元素的offsetHeight属性。但是如何获取DOM元素呢?当然是用一个引用。

js
import { useEffect, useRef } from "react"; export default function App() { // 创建一个引用 const divElement = useRef(); // 在组件第一次渲染时触发 useEffect(() => { // 获取div元素的高度 console.log("The height of the div is: ", divElement.current.offsetHeight); }, []); return ( <div ref={divElement}> <h1>Learn about useRef!</h1> </div> ); }

在上面的例子中,我使用了useEffect来确保只有在组件第一次渲染后才调用divElement.current.offsetHeight。事实上,一开始,引用是undefined的,只有当组件渲染并且div被创建后,它才会持有它的DOM元素值。你可以看到,使用引用可能有些棘手,你必须记住一些事情。

实现原理

要理解useRef的工作原理,我们需要先了解一些React的基础知识。

React是一个用于构建用户界面的库,它通过一个虚拟的DOM来管理真实的DOM。虚拟DOM是一个JavaScript对象,它表示真实的DOM结构,但是更轻量级和高效。React使用虚拟DOM来跟踪组件的状态和属性,然后根据需要更新真实的DOM

当你在组件中使用useStateuseReducerHook来管理状态时,你实际上是在更新虚拟DOM中的状态。每当状态发生变化时,React都会重新渲染组件,并将新的虚拟DOM与旧的虚拟DOM进行比较,找出差异,然后将这些差异应用到真实的DOM上。这个过程被称为协调(reconciliation)

但是,有时候你可能不想让React管理你的状态,而是想直接操作真实的DOM。这可能是因为你需要使用一些非React的库,或者你需要访问一些React无法提供的DOM属性或方法。这时候,你就可以使用引用(ref)来实现。

useRef的基本实现原理其实很简单,它就是利用了JavaScript的闭包和对象引用的特性,来创建一个只有一个current属性的对象,然后将这个对象保存在一个变量中,这个变量在每次渲染时都会被复用,而不会被重新赋值。我们可以用下面的伪代码来模拟useRef的实现:

js
// 定义一个变量,用来存储ref对象 let ref; // 定义useRef函数,接收一个初始值作为参数 function useRef(initialValue) { // 如果ref不存在,就创建一个新的对象,将初始值赋给它的current属性 if (!ref) { ref = { current: initialValue }; } // 返回ref对象 return ref; }

可以看到,useRef函数只会在第一次调用时创建一个新的对象,然后将它赋值给ref变量,之后的调用都会返回这个变量,而不会创建新的对象。这样,我们就可以在组件的不同渲染之间保持一个可变的值,而不用担心它会被重新创建或销毁。

引用是一个对象,它有一个.current属性,可以指向任何你想要的值。当你创建一个引用时,React会将它保存在一个内部的数据结构中,这个数据结构不会随着组件的重新渲染而改变。这意味着,你可以在组件的整个生命周期中访问同一个引用对象,而不用担心它会丢失或改变。

当你将一个引用分配给一个DOM元素时,React会在渲染时将该元素的实例赋值给引用的.current属性。这样,你就可以通过引用来直接访问该元素,而不需要通过虚拟DOM或其他方式。你也可以在任何时候修改引用的值,而不会触发组件的重新渲染,因为引用不是一个状态,而是一个可变的容器。

最佳实践

useRef是一个非常有用的Hook,但是也有一些注意事项和最佳实践,我们应该遵守,以避免一些潜在的问题和错误。下面列举了一些常见的最佳实践:

  • 尽量避免直接操作DOM,除非React没有提供相应的API。直接操作DOM会破坏React的声明式编程范式,导致组件的状态和DOM的状态不一致,可能引发一些难以发现和解决的bug。如果我们需要对DOM元素进行一些操作,我们应该优先考虑使用React提供的API,比如ref、state、props、effect等,只有当这些API都不能满足我们的需求时,我们才可以使用useRef来直接操作DOM。
  • 使用useRef来存储一些不会触发组件重新渲染的值,比如定时器、订阅、外部库的实例等。这些值在组件的不同渲染之间保持不变,而且不会影响组件的渲染,因此使用useRef来存储它们是合适的。如果我们使用useState来存储这些值,那么每次修改它们的值都会触发组件的重新渲染,这是不必要的,而且会影响性能。
  • 不要使用useRef来存储一些会触发组件重新渲染的值,比如状态、数据、计算结果等。这些值在组件的不同渲染之间可能会发生变化,而且会影响组件的渲染,因此使用useRef来存储它们是不合适的。如果我们使用useRef来存储这些值,那么当它们的值发生变化时,组件不会重新渲染,这会导致组件的状态和界面不一致,可能引发一些难以发现和解决的bug。我们应该使用useState或useReducer来存储这些值,这样当它们的值发生变化时,组件会重新渲染,保持状态和界面的一致性。
  • 在组件卸载时,清除使用useRef存储的一些需要清理的值,比如定时器、订阅、外部库的实例等。这些值在组件卸载后,可能会继续运行或占用资源,导致内存泄漏或其他问题。我们应该使用useEffect来在组件卸载时,清除这些值,释放资源,避免潜在的问题。例如,如果我们使用useRef来存储一个定时器,我们应该在useEffect的返回函数中,清除这个定时器,代码如下:
js
// 使用useRef存储一个定时器 const timer = useRef(); // 在组件卸载时,清除定时器 useEffect(() => { return () => { clearInterval(timer.current); }; }, []);
  • 不要混淆useRef和createRef。useRef和createRef都可以用来创建ref对象,但它们的行为和用途有一些区别。useRef是一个Hook,只能在函数组件中使用,它会在每次渲染时返回同一个ref对象,因此可以用来在组件的不同渲染之间保持一个可变的值。createRef是一个方法,可以在类组件和函数组件中使用,它会在每次调用时返回一个新的ref对象,因此只能用来访问DOM元素或子组件的实例,不能用来在组件的不同渲染之间保持一个可变的值。我们应该根据不同的场景,选择合适的方法来创建ref对象,避免混淆它们的行为和用途。

总结

useRef是一个非常强大和有用的Hook,它可以让我们直接访问和操作DOM元素,以及在组件的不同渲染之间保持一个可变的值。

它的实现原理很简单,就是利用了JavaScript的闭包和对象引用的特性,来创建一个只有一个current属性的对象,然后将这个对象保存在一个变量中,这个变量在每次渲染时都会被复用,而不会被重新赋值。

我们在使用useRef时,应该遵守一些注意事项和最佳实践,以避免一些潜在的问题和错误。useRef与其他Hook,比如useStateuseEffectuseCallback等,有着不同的功能和优势,我们应该根据不同的场景,选择合适的Hook来实现我们的需求,从而提高我们的代码的可读性、可维护性和性能。

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:CreatorRay

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!