当前位置：首页 > article >正文

复习：react 中的 refs，怎么使用，有哪些使用场景

article 2024/10/22 20:59:17

在 React 中，refs（引用）是一个重要的特性，它允许开发者直接访问 DOM 元素或者 React 组件的实例。以下是对 React 中 refs 的使用及其使用场景的详细解释：

字符串引用

在早期的 React 版本中，可以通过字符串来设置 ref。然而，这种方法已经被废弃，因为它可能导致性能下降，并且在未来版本中可能会被移除。
```
<input ref="myInput" />
// 在组件的方法中访问
this.refs.myInput.focus();
```
注意：虽然这种方式仍然可以在某些旧代码中找到，但不建议在新代码中使用。
回调函数引用

回调函数引用是一种更安全的方式，因为它可以确保在 ref 被设置或更新时执行特定的逻辑。
```
<input ref={(el) => this.myInput = el} />
// 在组件的方法中访问
this.myInput.focus();
```
这种方式在组件更新时可能会执行两次回调函数（先清空