react refs如何使用
React Refs 的基本概念
Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常用于需要直接操作 DOM 的场景，如焦点管理、动画触发或第三方库集成。
创建 Refs
使用 React.createRef() 创建 ref 对象，通常在组件的构造函数中初始化：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
}绑定 Refs
通过 ref 属性将 ref 对象附加到 DOM 元素或类组件上：
render() {
return <div ref={this.myRef}>Example</div>;
}访问 Refs
通过 ref 对象的 current 属性访问绑定的 DOM 节点或组件实例：
componentDidMount() {
console.log(this.myRef.current); // 输出 DOM 节点或组件实例
}函数组件中的 Refs
函数组件使用 useRef Hook 创建 ref：
import React, { useRef } from 'react';
function FunctionComponent() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
</>
);
}回调 Refs
另一种方式是使用回调函数作为 ref，适用于动态绑定或需要在 ref 变化时执行逻辑的场景：
class CallbackRefExample extends React.Component {
setRef = (element) => {
this.customRef = element;
};
render() {
return <div ref={this.setRef}>Callback Ref</div>;
}
}转发 Refs（Forwarding Refs）
通过 React.forwardRef 将 ref 传递给子组件，常用于高阶组件或封装通用逻辑的组件：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="fancy-button">
{props.children}
</button>
));
// 父组件使用
class Parent extends React.Component {
buttonRef = React.createRef();
render() {
return <FancyButton ref={this.buttonRef}>Click</FancyButton>;
}
}注意事项
- 避免过度使用 Refs：优先使用 React 的状态和 props 管理数据流。
- 函数组件无法直接绑定 ref：需通过
forwardRef或转换为类组件。 - 更新时机：Refs 在
componentDidMount或componentDidUpdate后更新，避免在渲染阶段访问。
通过以上方法，可以灵活地在 React 中管理 DOM 或组件实例的引用。
