React源码解析(四)：react-ref

平时我们可能会有这样的需求，就是需要获取某个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属性上供我们去使用。