一：引言

在React开发过程中，我们会涉及dom操作，以及值的存储，那么，useRef、ref、forwardsRef 他们三者有什么区别呢？

二：区别

（一）ref

1：定义=>用于直接访问DOM元素或类组件实例‌

2：使用场景：

类组件中通过React.createRef()创建，关联HTML元素或自定义类组件实例‌

函数组件中默认不支持直接挂载ref到组件上（需配合forwardRef）‌

3：特点：

每次重新渲染会生成新的ref对象

通过current属性访问目标节点或实例

（二）useRef‌

1：定义=>用于函数组件中创建可持久化且可变的对象引用‌

2：使用场景：

获取DOM元素（替代类组件中的ref）‌

保存与渲染无关的变量，避免重复渲染‌

3：特点：

返回的引用对象在组件生命周期内保持不变，修改current属性不会触发重新渲染‌

可存储任意类型数据，不限于DOM节点‌

（三）forwardRef‌

1：定义=>用于跨组件传递ref，解决函数组件无法直接接收ref的问题‌

2：使用场景：

父组件需要直接操作子组件的DOM元素或暴露特定方法‌

高阶组件（HOC）中转发ref到内部组件‌

3：特点：

需配合useRef或createRef使用，通过React.forwardRef((props, ref) => {})包裹子组件‌

可结合useImperativeHandle自定义暴露给父组件的方法或属性‌

三：代码

1：ref

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  componentDidMount() {
    this.inputRef.current.focus(); // 访问DOM节点‌:ml-citation{ref="2,4" data="citationList"}
  }
  render() {
    return <input ref={this.inputRef} />;
  }
}

2：useRef

function TextInput() {
  const inputRef = useRef(null);
  const focusInput = () => inputRef.current.focus();
  
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>聚焦</button>
    </div>
  ); // 持久化引用DOM元素‌:ml-citation{ref="1,8" data="citationList"}
}

3：forwardRef

const Child = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

function Parent() {
  const inputRef = useRef(null);
  return <Child ref={inputRef} />; 
}

四：总结

1：ref‌：类组件的原生引用机制，需通过createRef创建。‌

2：useRef‌：函数组件的多功能引用工具，支持持久化数据存储。

3‌：forwardRef‌：解决函数组件无法直接接收ref的问题，实现跨组件引用透