useRef的应用场景？

前言

hello world欢迎来到前端的新世界

---

当前文章系列专栏：react.js
‍博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)
感谢大家支持！您的观看就是作者创作的动力

useRef是React中的一个Hook，它的主要作用是创建一个可变的引用，可以在组件的多次渲染之间保持稳定。useRef返回一个可变的ref对象，它的.current属性可以存储任意可变值。

useRef的应用场景？

• 访问DOM元素或组件实例：通过将useRef关联到组件的DOM元素上，可以通过ref.current来访问该DOM元素。这在需要直接操作DOM的情况下非常有用，例如获取元素尺寸、滚动位置等。同时，也可以将useRef关联到自定义组件的实例上，以便在组件外部访问组件的方法或属性。

• 缓存数值或对象的引用：如果我们有一些需要在组件多次渲染之间保持稳定的值（不触发重新渲染），可以使用useRef来存储这些值。由于useRef返回的引用对象在组件重新渲染时保持不变，因此可以将其用于存储不需要触发重新渲染的数据，例如计时器ID、缓存的请求结果等。

• 存储上一次的值：在某些情况下，我们需要比较当前值和上一次的值，并根据值的变化执行相应的操作。这时，可以使用useRef来存储上一次的值，然后在下一次渲染时进行比较。这种方式在使用useEffect时经常使用。

useRef可以用来获取子组件的方法吗？

import React, { useRef, useEffect, forwardRef } from 'react';

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  // 这里可以定义子组件的一些逻辑和方法

  // 将ref传递给子组件根元素或其他需要引用的组件
  return <div ref={ref}>Child Component</div>;
});

// 父组件
const ParentComponent = () => {
  const childRef = useRef(null);

  useEffect(() => {
    // 在父组件中可以通过childRef.current访问到子组件的实例
    // 这里可以调用子组件的方法或访问子组件的属性
    if (childRef.current) {
      console.log(childRef.current); // 打印子组件的实例
      // 调用子组件的方法
      childRef.current.someMethod();
    }
  }, []);

  return (
    <div>
      <ChildComponent ref={childRef} />
    </div>
  );
};

在上述代码中，我们创建了一个childRef通过useRef，然后将其作为ref属性传递给ChildComponent组件。在ChildComponent中，我们使用forwardRef来进行引用转发，将ref传递给子组件的根元素。这样，我们就可以在父组件中通过childRef.current访问到子组件的实例，并调用子组件的方法或访问子组件的属性。

需要注意的是，在使用useRef获取子组件的方法时，要确保子组件已经渲染完成，可以在父组件的useEffect钩子中使用childRef.current进行操作，或者在其他合适的时机进行调用。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力