简述React 中 refs 的作用 ？

Refs（引用）在React中是一种特殊的属性，可以用来访问和交互React元素或组件的DOM节点。虽然我们通常推荐使用React的声明式方式来管理应用程序的状态和DOM，但在某些情况下，我们可能需要直接操作DOM，这就是Refs的用武之地。

以下是Refs的一些常见用途：

1. 管理焦点： 对于一些需要用户输入的元素（如input或textarea），Refs可以用来获取焦点。

2. 触发强制动画： 有时候，我们可能需要直接操作DOM元素来触发动画。

3. 集成第三方DOM库： 当需要和非React库（如jQuery插件）集成时，Refs可以用来直接操作DOM。

例如，如果我们创建一个自动获取焦点的输入框，我们可以使用Refs来实现：

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个 ref 来存储 textInput 的 DOM 元素
    this.textInput = React.createRef();
  }

  componentDidMount() {
    // 使用原生的 DOM API 让 text input 元素获取焦点
    this.textInput.current.focus();
  }

  render() {
    // 把 `this.textInput` 指向 `<input>` DOM 节点
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

在这个例子中，React.createRef()被用来创建一个新的ref，然后在<input>元素上通过ref属性将其附加。这样，我们就可以在组件的其他地方（如生命周期方法）通过this.textInput.current来访问这个DOM元素。

请注意，过度使用Refs可能会导致代码难以理解和维护，因此在大多数情况下，我们应优先考虑使用React的声明式模式。