平时我们可能会有这样的需求,就是需要获取某个dom节点或者子组件的实例来更新,而并不是只是通过props等来更新dom节点或者组件。如果没有一个好的方法我们可能自己去获取节点(例:querySelector等)或者去绑定事件来进行一些操作,而且自己还要去管理获取的一些相关的东西,这样可能会不方便。那么,在react当中就为我们提供了这样的方式,通过ref去获取子节点的一个实例。
在react当中有三种使用ref的方式:
- string ref(即将废弃)
- function(ref={node=> this.refs = node})
- createRef(推荐使用)
看下createRef源码:
import type {RefObject} from 'shared/ReactTypes';
// an immutable object with a single mutable valueexport
function createRef(): RefObject {
const refObject = {
current: null,
};
if (__DEV__) {
Object.seal(refObject);
}
return refObject;
}复制代码
只有这么短短的几行代码, 看下官方的使用实例:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
componentDidMount() {
this.inputRef.current.focus();
}
}复制代码
调用React.createRef(),会把节点的实例挂载到current属性上供我们去使用。