在
React 中，
ref 是用于访问 DOM 元素或组件实例的引用机制，它允许开发者突破
React 的声明式抽象，直接操作底层实例，是组件与 DOM/子组件交互的重要桥梁[^1]。其作用主要体现在以下几个方面：
- **获取 DOM 元素**：
ref 可以帮助开发者直接获取 DOM 元素，从而进行一些操作，如操作 DOM 元素的属性、样式等。在做复杂业务比如动画，不可避免要用到页面标签时，可以
使用 ref。不过要注意，
ref 和 setState 合用的时候，会出现 dom 获取不及时的问题，因为 setState 是异步的。如果希望页面更新后获取 dom，要把获取 dom 的代码放在 setState 的第二个参数的
函数里，它是一个回调
函数[^5]。
```jsx
import
React, { use
Ref, useEffect } from '
react';
const MyComponent = () => {
const input
Ref = use
Ref(null);
useEffect(() => {
if (input
Ref.current) {
input
Ref.current.focus();
}
}, []);
return (
<input type="text"
ref={input
Ref} />
);
};
export default MyComponent;
```
- **进行 DOM 测量**：
使用 ref 可以方便地进行 DOM 测量，例如获取元素的宽度、高度、位置等信息[^2]。
```jsx
import
React, { use
Ref, useEffect } from '
react';
const MyComponent = () => {
const div
Ref = use
Ref(null);
useEffect(() => {
if (div
Ref.current) {
const rect = div
Ref.current.getBoundingClientRect();
console.log('元素宽度:', rect.width);
console.log('元素高度:', rect.height);
}
}, []);
return (
<div
ref={div
Ref}>测量我</div>
);
};
export default MyComponent;
```
- **集成第三方库**：当需要在
React 项目中集成第三方库时，
ref 可以帮助将
React 组件与第三方库进行连接，使第三方库能够操作
React 组件对应的 DOM 元素[^2]。
- **状态管理（
函数组件）**：在
函数组件中，可以
使用 use
Ref 钩子进行状态管理，use
Ref 创建的对象在组件的整个生命周期内保持不变，可用于存储一些不需要触发重新渲染的数据[^2]。
```jsx
import
React, { use
Ref, useEffect } from '
react';
const MyComponent = () => {
const count
Ref = use
Ref(0);
useEffect(() => {
count
Ref.current = count
Ref.current + 1;
console.log('组件渲染次数:', count
Ref.current);
});
return (
<div>查看控制台渲染次数</div>
);
};
export default MyComponent;
```
- **访问子组件实例**：在类组件中，可以通过
ref 访问子组件的实例，从而调用子组件的方法或访问子组件的属性。不过要注意，这种方法只适用于类组件，
函数组件因为没有实例，所以不适用，如果想在
函数组件中实现类似功能可以用 forward
Ref [^4]。
本文详细介绍了React中ref的使用方法，包括其在直接操作DOM时的应用场景及注意事项，同时提供了如何在setState异步操作后执行特定任务的代码示例。
扫一扫
1089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
