useRef / ref / forwardsRef 的区别是什么?
useRef 和 ref 都是 React 中用于操作 DOM 元素或自定义组件实例的工具,而 forwardRef 则是用于访问嵌套子组件中的 DOM 元素或自定义组件实例。
它们之间的区别如下:
- useRef 是一个 hook 函数,可以在函数组件中使用;ref 是一个对象属性,只能在类组件中使用。
- useRef 返回一个可变的 ref 对象,可以在组件的整个生命周期内保持不变,也就是说不会因为重新渲染而改变。而 ref 每次渲染都会被重新创建。
- useRef 主要用于存储和更新组件内部状态,以及操作 DOM 元素。而 ref 主要用于获取 DOM 元素或自定义组件实例。
- forwardRef 是用于将 ref 属性“向下传递”给一个函数式子组件或自定义组件的工具函数。它允许父组件调用子组件中的 DOM 元素或自定义组件实例。
综上所述,useRef 和 ref 都是用于操作 DOM 元素或自定义组件实例的工具,与之相比,forwardRef 则是一个更高级的工具,用于处理专门的情况,即访问嵌套子组件中的 DOM 元素或自定义组件实例。