useRef、ref、forwardsRef 的区别是什么？

Question

在 React 中， ref 是一种用于访问 DOM 元素或组件实例的方法， useRef 和 forwardRef 是 ref 的两个相关 Hook 和高阶组件。

1. ref ： ref 是 React 中用于访问 DOM 元素或组件实例的方法。在函数组件中，可以使用 useRef Hook 来创建一个 ref 对象，然后将其传递给需要引用的元素或组件。在类组件中，可以直接在类中定义 ref 属性，并将其设置为元素或组件的实例。
2. useRef ： useRef 是 React 中的 Hook，用于创建一个 ref 对象，并在组件生命周期内保持其不变。 useRef 可以用于访问 DOM 元素或组件实例，并且在每次渲染时都会返回同一个 ref 对象。通常情况下， useRef 更适合用于存储不需要触发重新渲染的值，例如定时器的 ID 或者其他副作用。
3. forwardRef ： forwardRef 是一个高阶组件，用于将 ref 属性转发给其子组件。通常情况下，如果一个组件本身并不需要使用 ref 属性，但是其子组件需要使用 ref 属性，那么可以使用 forwardRef 来传递 ref 属性。 forwardRef 接受一个函数作为参数，并将 ref 对象作为第二个参数传递给该函数，然后返回一个新的组件，该组件接受 ref 属性并将其传递给子组件。

简而言之， ref 是 React 中访问 DOM 元素或组件实例的方法， useRef 是一个 Hook，用于创建并保持一个不变的 ref 对象， forwardRef 是一个高阶组件，用于传递 ref 属性给子组件。