Skip to content

useRef / ref / forwardsRef 的区别是什么?

Posted on:2024年7月23日 at 09:48

useRef 和 ref 都是 React 中用于操作 DOM 元素或自定义组件实例的工具,而 forwardRef 则是用于访问嵌套子组件中的 DOM 元素或自定义组件实例。

它们之间的区别如下:

  1. useRef 是一个 hook 函数,可以在函数组件中使用;ref 是一个对象属性,只能在类组件中使用。
  2. useRef 返回一个可变的 ref 对象,可以在组件的整个生命周期内保持不变,也就是说不会因为重新渲染而改变。而 ref 每次渲染都会被重新创建。
  3. useRef 主要用于存储和更新组件内部状态,以及操作 DOM 元素。而 ref 主要用于获取 DOM 元素或自定义组件实例。
  4. forwardRef 是用于将 ref 属性“向下传递”给一个函数式子组件或自定义组件的工具函数。它允许父组件调用子组件中的 DOM 元素或自定义组件实例。

综上所述,useRef 和 ref 都是用于操作 DOM 元素或自定义组件实例的工具,与之相比,forwardRef 则是一个更高级的工具,用于处理专门的情况,即访问嵌套子组件中的 DOM 元素或自定义组件实例。

原文转自:https://fe.ecool.fun/topic/22a212d3-d12b-4f23-a7d7-26a55037af7d