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 附加到 React 元素上：
render() {
return <div ref={this.myRef} />;
}访问 Refs
通过 ref 的 current 属性访问 DOM 节点或组件实例：
componentDidMount() {
const node = this.myRef.current;
// 操作 DOM 节点
}函数组件中的 Refs
使用 useRef Hook 在函数组件中创建 ref：
function MyFunctionComponent() {
const myRef = React.useRef(null);
return <div ref={myRef} />;
}回调 Refs
另一种设置 refs 的方式，通过传递函数而不是 ref 对象：
setTextInputRef = (element) => {
this.textInput = element;
}
render() {
return <input ref={this.setTextInputRef} />;
}转发 Refs
使用 React.forwardRef 将 ref 自动传递到子组件：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 父组件可以获取到 button 的 ref
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;使用场景
- 管理焦点、文本选择或媒体播放
- 触发强制动画
- 集成第三方 DOM 库
- 访问子组件的方法
注意事项
- 避免过度使用 refs，优先考虑状态提升和 props
- 不能在函数组件上使用 ref 属性，除非使用 forwardRef
- ref 会在 componentDidMount 或 componentDidUpdate 之前更新
