深入解析 React Refs：从访问 DOM 到命令式 API 的神奇之旅
2022-12-07 14:40:29
React 中使用 Ref 的指南
为什么需要访问 DOM？
在 React 中，我们通常使用声明式编程范式，只需声明想要达到的最终状态，React 就会自动将更新应用到 DOM 中。然而，有时我们可能需要直接访问 DOM 元素，以进行一些更高级的操作，例如：
- 手动操作 DOM 元素
- 与第三方库交互
- 实现特殊效果
Refs 如何帮助我们实现这一点？
Refs 是 React 提供的一种机制，允许我们访问 DOM 元素。我们可以通过在组件中使用 ref 属性来实现这一点。ref 属性接受一个回调函数作为参数，当组件挂载时，该回调函数将被调用，并传入一个指向 DOM 元素的引用。
用 React Hook useRef 实现 Refs
useRef 是一个 React Hook，允许我们在函数组件中使用 Refs。它返回一个带有 current 属性的可变 ref 对象，该属性指向 DOM 元素。
const MyComponent = () => {
const myRef = useRef(null);
useEffect(() => {
console.log(myRef.current); // 输出 DOM 元素
}, []);
return <div ref={myRef}>Hello, world!</div>;
};
在类组件中使用 Refs
在类组件中，我们可以使用 ref 属性将组件实例的属性设置为 DOM 元素的引用。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 输出 DOM 元素
}
render() {
return <div ref={this.myRef}>Hello, world!</div>;
}
}
使用 forwardRef 将 Refs 传递给子组件
forwardRef 是一个 React 高阶组件，允许我们在类组件中将 Refs 传递给子组件。它接受一个函数作为参数，该函数返回一个带有 ref 属性的子组件。
const MyComponent = React.forwardRef((props, ref) => {
return <div ref={ref}>Hello, world!</div>;
});
使用 useImperativeHandle 公开命令式 API
useImperativeHandle 是一个 React Hook，允许我们在函数组件中公开一个命令式 API。它接受一个函数作为参数，该函数返回一个对象，该对象包含要公开的方法。
const MyComponent = () => {
const ref = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
ref.current.focus();
},
}));
return <input ref={ref} />;
};
如何正确使用 Refs
在使用 Refs 时，需要注意以下几点：
- 避免在组件的渲染方法中使用 Refs，这可能会导致性能问题。
- 只在需要时才使用 Refs，不要为了使用而使用 Refs。
- 谨慎使用 Refs，Refs 可能会导致组件难以测试和维护。
常见问题解答
-
Refs 的替代方法是什么？
Refs 是直接访问 DOM 元素的唯一方法。
-
如何在组件卸载时清理 Refs？
在类组件中，可以在
componentWillUnmount生命周期方法中清除 Refs。在函数组件中，可以在useEffect清理函数中清除 Refs。 -
可以使用 Refs 来访问第三方库吗？
是的，Refs 可以用来访问第三方库中创建的 DOM 元素。
-
如何使用 Refs 来实现特殊效果？
Refs 可以用来实现各种特殊效果，例如动画、拖放和键盘导航。
-
何时应该避免使用 Refs？
当可以使用声明式方法或第三方库时，应该避免使用 Refs。
