在 React 中，ref 是一种用于访问组件或 DOM 元素的引用的特殊属性。在组件中存储对 DOM 节点或组件实例的引用，直接访问和操作

ref 的使用方式有两种：

1：字符串形式的 ref：在早期版本的 React 中，可以使用字符串来创建 ref。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

2：回调形式的 ref：在现代版本的 React 中，推荐使用回调函数来创建 ref。回调函数会在组件挂载或卸载时被调用，并接收对组件实例或 DOM 元素的引用作为参数。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  componentDidMount() {
    this.inputRef.focus();
  }

  setInputRef = (ref) => {
    this.inputRef = ref;
  };

  render() {
    return <input ref={this.setInputRef} />;
  }
}

使用 ref 可以实现以下功能：

• 获取 DOM 元素的引用，以便直接操作它们（例如，聚焦、滚动等）。
• 获取子组件的引用，以便与子组件进行通信和调用子组件的方法。
• 在函数组件中使用 forwardRef 来将 ref 传递给子组件。

尽量避免在组件内部过度使用 ref，因为会破坏 React 的声明性和组件化特性，可能导致代码可读性和可维护性的下降。只有在必要时，才使用 ref 来进行特定的 DOM 操作或与第三方库集成。

使用 ref 的一般步骤

在 React 中，可以使用 ref 属性来创建和使用 ref。 下面是使用 ref 的一般步骤：

1：创建 ref：

在类组件中，用 React.createRef() 创建 ref 对象，将其赋值给组件的实例属性。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  // ...
}

在函数组件中，用 React.useRef() 创建 ref 对象，并赋值给一个变量。

function MyComponent() {
  const myRef = React.useRef();
  // ...
}

2：将 ref 绑定到组件或 DOM 元素：

对于 DOM 元素，将 ref 直接赋值给 ref 属性。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问 DOM 元素
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

对于类组件，将 ref 绑定到类组件的实例。

class ChildComponent extends React.Component {
  doSomething() {
    // ...
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  componentDidMount() {
    this.childRef.current.doSomething(); // 调用子组件方法
  }

  render() {
    return <ChildComponent ref={this.childRef} />;
  }
}

3：访问 ref：

对于 DOM 元素，可以使用 ref.current 来访问 DOM 元素。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus(); // 聚焦到输入框
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

对于类组件，可以通过 ref.current 访问类组件的实例。

class ChildComponent extends React.Component {
  doSomething() {
    // ...
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  componentDidMount() {
    this.childRef.current.doSomething(); // 调用子组件方法
  }

  render() {
    return <ChildComponent ref={this.childRef} />;
  }
}

访问 ref 的时机是在组件挂载完成后。在 componentDidMount 或后续的生命周期方法中访问 ref，ref 的值不为 null 或 undefined。

如果要在函数组件中使用 ref，可以使用 React.forwardRef 来将 ref 传递给子组件，在子组件中访问 ref。