react中ref如何
React 中 ref 的使用方法
在 React 中，ref 用于直接访问 DOM 节点或 React 组件实例。以下是几种常见的 ref 使用方法。
创建 ref
使用 React.createRef() 创建 ref 对象，通常在组件的构造函数中完成：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}访问 ref
通过 ref 对象的 current 属性访问 DOM 节点或组件实例：
componentDidMount() {
const node = this.myRef.current;
console.log(node); // 输出 DOM 节点
}函数式 ref
使用函数作为 ref，函数会在组件挂载或卸载时调用：
class MyComponent extends React.Component {
setRef = (element) => {
this.myRef = element;
};
render() {
return <div ref={this.setRef} />;
}
}在函数组件中使用 ref
函数组件没有实例，但可以通过 useRef Hook 创建 ref：
function MyFunctionComponent() {
const myRef = React.useRef(null);
React.useEffect(() => {
console.log(myRef.current); // 访问 DOM 节点
}, []);
return <div ref={myRef} />;
}转发 ref
使用 React.forwardRef 将 ref 传递给子组件：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="fancy-button">
{props.children}
</button>
));
function App() {
const buttonRef = React.useRef(null);
return (
<FancyButton ref={buttonRef}>Click me!</FancyButton>
);
}回调 ref 与 useRef 的区别
- 回调 ref：每次组件更新时都会调用回调函数，可能导致性能问题。
- useRef：返回的
ref对象在组件的整个生命周期内保持不变，性能更优。
注意事项
- 避免过度使用
ref，优先考虑 React 的数据流（props 和 state）。 ref不能用于函数组件，除非使用forwardRef或useImperativeHandle。- 在函数组件中，
useRef也可以用于存储可变值，类似于实例变量。
通过以上方法，可以在 React 中灵活使用 ref 来访问 DOM 或组件实例。
