什么是 React的refs？为什么它们很重要

&ACE&2024-01-29 1:03

Refs是React中的一个特殊属性，用于访问在组件中创建的DOM元素或组件实例。

Refs的重要性在于它们提供了一种直接访问DOM元素或组件实例的方式，使得我们可以在需要时操作它们。在某些情况下，例如在处理表单输入、媒体播放或触发动画等场景下，我们需要直接操作DOM元素。使用Refs，我们可以轻松地获取和修改DOM元素的属性和方法，或者在组件之间传递数据和调用方法。

在React中，Refs的使用方式有两种：字符串形式和回调函数形式。字符串形式的Refs已经被官方不推荐使用，而回调函数形式的Refs则是推荐的方式。回调函数形式的Refs使用ref属性，并传递一个回调函数，该回调函数接收一个参数，用于接收被引用的DOM元素或组件实例。通过Refs，我们可以获取到DOM元素的引用，并在需要时进行操作。

例如，以下是一个使用回调函数形式的Refs获取输入框的引用的示例：

jsx 复制代码

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

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

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

在上述示例中，我们通过React.createRef()创建了一个Refs，并将其赋值给组件的inputRef属性。在组件挂载后，我们通过this.inputRef.current获取到输入框的引用，并调用focus()方法进行焦点操作。

总之，Refs提供了一种直接访问和操作DOM元素或组件实例的方式，使得我们可以更加灵活地控制和操作界面上的元素。