对组件的引用（refs）

构建完你的组件之后，你可能会想要去寻求一个办法，来直接调用你在render()返回的组件的实例的方法。在大部分情况下，这应该不是必须的，因为在响应式数据流中，你要输出一些数据，你应该在render()中给子组件传递最新的属性。不过，在某些特殊情况下，直接操作组件实例的方法还是必要或者有利的。所以React提供了一个打破限制的办法，这就是refs。refs（reference,引用）在以下时候特别有用：当你需要直接操作一个组件渲染的DOM标记（譬如要调整它的绝对位置），或者在一个大型的非React应用中使用一个React组件，或者是把你已有的代码库在React中复用。

让我们来看看怎么获取一个ref，并尝试深入处理一个复杂的例子。

ReactDOM.render返回的ref引用

不同于你在组件中定义的render()函数（它返回一个虚拟DOM元素），ReactDOM.render()会直接返回你的组件的真正实例的引用（如果是无状态组件，则返回null）。

var myComponent = ReactDOM.render(<MyComponent />, myContainer);

但是你需要记住，JSX本身并不返回一个组件实例！它只是一个ReactElement对象：一个关于所挂载的组件应当如何表示的轻量级描述。

var myComponentElement = <MyComponent />; // 这里只是一个ReactElement.

var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
myComponentInstance.doSomething();  //这才是真正的组件引用

注意
这种用法只能在最顶层使用。在组件内部，你应该通过props和state来处理与子组件的通讯，或者使用下面其它的办法来获取一个引用（字符串属性或者回调）。

ref回调属性

React支持一个特殊的属性，你可以把它挂到任何的组件上。这个ref属性可以是一个回调函数，并且这个回调函数会在组件被挂载后立刻被执行。引用到的组件会被作为参数传递，这个回调函数可以立即使用组件，或者把它的引用保存起来供将来使用（又或者，两者兼有）。

你只需要给任何render返回的东西增加一个ref属性：

render() {
  return (
    <TextInput
      ref={function(input) {
        if (input != null) {
          input.focus();
        }
      }} />
  );
}

或者使用ES6箭头函数：

render() {
    return <TextInput ref={(c) => this._input = c} />;
  }
  componentDidMount() {
    this._input.focus();
  }

如果给一个DOM组件(譬如<div>附加ref属性，你会直接拿到DOM节点。如果给一个复合组件（如<TextInput />）附加ref属性，你就会拿到对应的组件类的实例。在后一种情况下，你可以直接调用组件在类
给任何render函数渲染的东西增加ref属性，例如：定义中导出的任何方法。

注意一旦引用的组件被卸载，或者ref属性本身发生了变化，旧的ref会被再次调用，此时参数为null。这可以在你保存实例的情况下防止内存泄露。注意如果你和上文一样使用内联的函数表达式，那么React每次更新（即调用你的render）函数时，都会看到一个不同的函数对象，这样之后每次更新时ref回调都会被调用两次：一次参数是null，后一次是具体的组件实例。

ref字符串属性

React也支持在任意组件上使用一个字符串（而不是回调）来作为ref属性。尽管这种做法现在已经基本被弃用。
1. 给任何render函数渲染的东西增加ref属性，例如：
<input ref="myInput" />
2.在其它的地方（通常是事件处理代码里），通过this.refs访问真正的组件实例。

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

一个完整的例子

要获取一个React组件的引用，你即可以使用this来获取当前React组件，也可以使用ref来获取你拥有的子组件的引用。就像这样：

class MyComponent extends React.Components {
  handleClick() {
    // 使用原始的DOM API来聚焦输入框。
    if (this.myTextInput !== null) {
      this.myTextInput.focus();
    }
  }
  render() {
    // 这里ref属性是一个回调函数，
    // 它在组件加载后保存组件的引用到this.myTextInput
    return (
      <div>
        <input type="text" ref={(ref) => this.myTextInput = ref} />
        <input
          type="button"
          value="Focus the text input"
          onClick={()=>this.handleClick()}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

在这个例子里，我们可以拿到输入框的真正实例，所以我们可以在按钮被按下后调用输入框的focus()方法。

对于复合组件来说，这个引用会指向一个组件类的实例，所以你可以调用任何该类定义的方法。如果你需要访问该组件类实际的DOM节点，你可以用ReactDOM.findDOMNode来找到实际的节点，但我们并不推荐这样做，因为这在绝大部分情况下都打破了封装性，而且通常都能用更清晰的办法来在React模型中构建你的代码。

小结

引用(ref)是一种很棒的办法，用来往一个指定的子实例发送一个不适于使用响应式props和state传递的消息。你不应当在抽象数据流的时候到处使用引用。正常情况下，尽可能使用响应式数据流，仅仅在某些不使用响应式处理的场合使用引用。

阅读原文