使用 useRef 生成 React Ref

在 React 中，Ref 是一种用于获取组件内部 DOM 节点或 React 元素的机制。对于 React 父子组件，为了获取子组件内部的 DOM 元素，就必须通过向子组件传递函数来实现，而这种方式存在一些不便之处。为此，React 提供了一种名为 useRef 的 Hook，在使用时灵活方便。

介绍

使用 useRef 可以创建一个可变的 Ref 对象，并将其赋值为组件的某个属性值。在组件更新时，Ref 对象的值不会改变，但可以在每个渲染周期中读取该值。

以计数器为例，使用 useRef 来实现：

import { useRef } from 'react';
  
function Counter() {
  const countRef = useRef(0);
  return (
    <div>
      <button onClick={() => countRef.current++}>
        Click me
      </button>
      <p>You clicked the button {countRef.current} times</p>
    </div>
  );
}

在上面的代码中，countRef.current 的值在每次按钮被点击时都会自动增加。这是因为 useRef 返回的是一个对象，该对象的 current 属性可以在组件渲染过程中持久存在，并且可以在不触发重新渲染的情况下被读取。

使用场景

Ref 对象并不局限于存储数字，它可以存储任何类型的值。下面列举一些使用 useRef 的场景：

• 访问子组件的 DOM 元素或组件实例；
• 存储上一次渲染的某个状态值，以便在下一次渲染时进行比较或计算差异；
• 存储在整个组件生命周期中都需要持久存在的某些数据；
• 在 useEffect 中存储某些值，以便在下一次渲染时进行比较；
• 管理动画集合的状态。

总结

React Ref 是一种用于获取组件内部 DOM 节点或 React 元素的机制。使用 useRef 可以创建一个可变的 Ref 对象，并将其赋值为组件的某个属性值。这种方式非常灵活方便，可以适用于各种使用场景。