useRef 是 react 中的一个 hooks，用于管理函数组件中引用状态，防止组件刷新后重新创建引用对象。 useRef 方法 返回一个 useRef 对象，包含 current 属性，默认值是 null，存储在 current 属性的数据。发生值改变时不会触发组件渲染。
# 使用场景
使用 useRef 可以在以下场景下发挥作用：
- 获取 DOM 元素的引用：useRef 可以用来获取渲染后的 DOM 元素的引用，类似于类组件中的 ref 属性的作用。
- 保存组件的内部状态：由于 useRef 返回的引用在组件重新渲染时保持不变，我们可以使用 useRef 来存储和访问组件的内部状态，而不触发组件的重新渲染。
- 与其他 React 特性交互：useRef 可以与其他 React 特性（如动画库、焦点管理库等）进行交互，以便操作 DOM 或组件的状态。
# 注意
ref 和 useRef 两者都很容易被滥用，会造成使用开销比较大。
ref 和 useRef都是 React 提供的用于引用 DOM 元素或其他值的机制。它们的滥用可能会导致性能问题和代码可读性下降。
# 滥用场景
以下是滥用 ref 和 useRef 的一些常见情况：
- 过度使用
ref：在 React 中，应该尽量避免直接操作 DOM 元素。如果过度使用ref，可能会导致代码难以维护和理解。应该优先考虑使用 React 的状态和属性来管理组件的行为和状态。 - 频繁更新
ref：如果在每次渲染时都更新ref，可能会导致性能问题。因为每次更新ref都会触发组件重新渲染，这可能会导致不必要的性能开销。 - 不正确地使用
useRef：useRef返回的是一个可变的引用对象，如果不正确地使用它，可能会导致一些问题。例如，如果将useRef用于保存组件的状态，而不是使用useState，可能会导致状态不正确地更新。
# 遵循规则
为了避免滥用 ref 和 useRef，应该遵循以下准则：
- 尽量避免直接操作 DOM 元素，而是使用 React 的状态和属性来管理组件的行为和状态。
- 只在必要时使用
ref，并确保在更新ref时进行优化。 - 理解
useRef的正确用法，并避免将其用于保存组件的状态。
通过遵循这些准则，可以避免滥用 ref 和 useRef，从而减少使用开销并提高代码的可读性和可维护性。
