简述React 中 refs 的作用 ？
Refs（引用）在React中是一种特殊的属性，可以用来访问和交互React元素或组件的DOM节点。虽然我们通常推荐使用React的声明式方式来管理应用程序的状态和DOM，但在某些情况下，我们可能需要直接操作DOM，这就是Refs的用武之地。
以下是Refs的一些常见用途：
- 管理焦点： 对于一些需要用户输入的元素（如input或textarea），Refs可以用来获取焦点。
-
触发强制动画： 有时候，我们可能需要直接操作DOM元素来触发动画。
-
集成第三方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的声明式模式。