ref 在 React 中的使用方法和说明

react标签中ref的写法在 React 中，ref 属性用于引用组件中的某个元素或组件实例，以便在需要时对其进行操作。ref 属性的应用场景很多，比如直接访问 DOM 节点、管理 focus 状态、嵌套子组件等等。

下面，我们来详细了解一下 ref 在 React 中的使用方法和说明。

创建 Ref 对象

在 React 中，可以使用 React.createRef() 方法创建 Ref 对象。在组件构造函数中调用 createRef() 方法，然后将返回的 Ref 对象附加到要引用的元素或组件上。

例如，在以下代码中通过 React.createRef() 方法创建了 myRef 对象，并将其附加到 div 标签上：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}

在这种方式中，myRef.current 属性将包含所引用的 div 元素。

回调函数方式创建 Ref

除了使用 React.createRef() 方法外，还可以通过回调函数的方式来创建 Ref。我们可以定义一个回调函数来设置 Ref，将 Ref 的引用存储在组件实例中，然后将回调函数作为典型属性传递给子元素。当子元素被挂载(mount)或卸载(unmount)时，React 会自动更新 Ref：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }
  render() {
    return <div ref={this.setMyRef}>Hello, world!</div>;
  }
}

在这种方式中，myRef 属性将包含所引用的 div 元素。

使用 React.useRef() 钩子

另外一种创建 Ref 的方式是使用 React.useRef() 钩子。useRef() 钩子返回一个包含单个属性 current 的对象（初始值为 null）。您可以将其与任何需要指向 DOM 节点或类实例的 React 元素一起使用。

使用 useRef() 钩子创建的 Ref 对象，与通过 React.createRef() 方法创建的 Ref 对象主要区别是：createRef() 创建的 Ref 对象不会随着每次渲染而重新创建，而 useRef() 钩子创建的 Ref 对象会跨渲染保持持久性。这意味着，在组件重新渲染时，useRef() 返回的对象将保持相同的引用。

function MyComponent() {
  const myRef = React.useRef(null);
  return <div ref={myRef}>Hello, world!</div>;
}

在这种方式中，myRef.current 属性将包含所引用的 div 元素。

在类组件中使用 Ref

在类组件中，可以使用上述的三种方式中的任意一种来创建 Ref。首先，在类构造函数中创建 Ref 对象，然后将其传递给要引用的元素：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}

也可以使用回调函数的方式来创建 Ref：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }
  render() {
    return <div ref={this.setMyRef}>Hello, world!</div>;
  }
}

在函数式组件中使用 Ref

在函数式组件中，需要使用 React.useRef() 钩子来创建 Ref。使用 useRef() 钩子创建的 Ref 对象与在类组件中创建的 Ref 对象非常相似。useRef() 对象的 current 属性可用于引用元素或组件实例：

function MyComponent() {
  const myRef = React.useRef(null);
  return <div ref={myRef}>Hello, world!</div>;
}

总结

以上就是在 React 中使用 Ref 的详细说明。无论我们是在类组件中还是函数式组件中，都可以通过 React.createRef() 方法、回调函数或 useRef() 钩子来创建 Ref，以便在需要时引用元素或组件实例。

需要注意的是，在使用 Ref 时应该避免过度使用 Ref，它们可能会使代码变得更加复杂和难以理解。如果可以使用其他方式来处理特定情况下的 DOM 操作，那么最好避免使用 Ref。