React 中的 ref 用法大全：常见方法、createRef 和 useRef 指南
2024-02-05 07:41:59
探索 ref 的世界：用途和优势
在 React 中，ref 是一个强大的工具，可以让我们获取组件或 DOM 元素的引用。有了它，我们就可以在组件之外访问这些元素，实现各种操作，例如：
- 访问子组件的属性或方法
- 在组件卸载前执行特定操作
- 与 DOM 元素交互，如滚动、获取坐标或操作样式
ref 还让我们能够在组件之间共享状态和数据。我们可以使用 ref 将组件状态或数据传递给父组件，以便父组件可以访问和修改这些信息。
方法一：使用 ref 属性
React 提供了一个方便的 ref 属性，可以直接绑定到组件上。当组件实例被创建时，ref 属性会被自动赋值为组件实例。
class MyComponent extends React.Component {
render() {
return <div ref={this.myRef} />;
}
myRef = React.createRef();
}
在上面的代码中，我们使用 ref 属性将组件实例赋值给了 myRef。之后，我们可以通过 this.myRef 访问组件实例并与之交互。
// 获取子组件的属性
const value = this.myRef.current.getValue();
// 调用子组件的方法
this.myRef.current.doSomething();
// 与 DOM 元素交互
this.myRef.current.scrollIntoView();
方法二：使用 createRef()
createRef() 函数是一种创建 ref 对象的方法，返回一个包含 React.createRef() 实例的 ref 对象。我们可以将 ref 对象分配给组件的 ref 属性，以便在组件实例被创建时获取其引用。
const myRef = React.createRef();
class MyComponent extends React.Component {
render() {
return <div ref={myRef} />;
}
}
与使用 ref 属性类似，我们可以使用 myRef.current 来访问组件实例并与之交互。
// 获取子组件的属性
const value = myRef.current.getValue();
// 调用子组件的方法
myRef.current.doSomething();
// 与 DOM 元素交互
myRef.current.scrollIntoView();
方法三：使用 useRef()
useRef() 钩子是 React 函数组件中使用 ref 的一种方式。它返回一个包含 React.RefObject 实例的 ref 对象。我们可以将 ref 对象分配给组件的 ref 属性，以便在组件实例被创建时获取其引用。
const myRef = useRef();
const MyComponent = () => {
return <div ref={myRef} />;
};
与使用 ref 属性和 createRef() 函数类似，我们可以使用 myRef.current 来访问组件实例并与之交互。
// 获取子组件的属性
const value = myRef.current.getValue();
// 调用子组件的方法
myRef.current.doSomething();
// 与 DOM 元素交互
myRef.current.scrollIntoView();
深入探究：常见的使用场景
-
表单处理 ：在表单中使用 ref 可以轻松获取表单元素的引用，以便对表单数据进行验证、提交和重置。
-
动画效果 ：在动画效果中使用 ref 可以轻松获取 DOM 元素的引用，以便对其进行动画操作。
-
滚动行为 ：在滚动行为中使用 ref 可以轻松获取滚动条的引用，以便对滚动行为进行控制和优化。
-
自定义组件 ：在自定义组件中使用 ref 可以轻松获取组件实例的引用，以便在组件之间共享数据和状态。
-
测试 ：在测试中使用 ref 可以轻松获取组件或 DOM 元素的引用，以便对它们进行断言和验证。
结语
在 React 中，ref 是一种强大的工具，可以让我们获取组件或 DOM 元素的引用，以便与之交互或对其进行操作。通过了解和掌握 ref 的各种使用方法，我们可以更加灵活地构建 React 应用程序，实现更丰富的功能和交互。
