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 的一些常见情况：
1. 过度使用 ref：在 React 中，应该尽量避免直接操作 DOM 元素。如果过度使用 `ref`，可能会导致代码难以维护和理解。应该优先考虑使用 React 的状态和属性来管理组件的行为和状态。
2. 频繁更新 ref：如果在每次渲染时都更新 ref，可能会导致性能问题。因为每次更新 `ref` 都会触发组件重新渲染，这可能会导致不必要的性能开销。
3. 不正确地使用 `useRef`：`useRef` 返回的是一个可变的引用对象，如果不正确地使用它，可能会导致一些问题。例如，如果将 `useRef` 用于保存组件的状态，而不是使用 `useState`，可能会导致状态不正确地更新。
遵循规则
为了避免滥用 `ref` 和 `useRef`，应该遵循以下准则：
1. 尽量避免直接操作 DOM 元素，而是使用 React 的状态和属性来管理组件的行为和状态。
2. 只在必要时使用 `ref`，并确保在更新 `ref` 时进行优化。
3. 理解 `useRef` 的正确用法，并避免将其用于保存组件的状态。
通过遵循这些准则，可以避免滥用 `ref` 和 `useRef`，从而减少使用开销并提高代码的可读性和可维护性。
