对组件的引用(refs)
2016-03-17 by tdzl2003

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

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


ReactDOM.render返回的ref引用

注:本部分与React Native关系不大。

不同于你在组件中定义的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();  //这才是真正的组件引用

注意

这种用法只能在最顶层使用。在组件内部,你应该通过propsstate来处理与子组件的通讯,或者使用下面其它的办法来获取一个引用(字符串属性或者回调)。

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属性,你就会拿到对应的组件类的实例。在后一种情况下,你可以直接调用组件在类定义中导出的任何方法。

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

ref字符串属性

React也支持在任意组件上使用一个字符串(而不是回调)来作为ref属性。尽管这种做法现在已经基本被弃用。

  1. 给任何render函数渲染的东西增加ref属性,例如:
<input ref="myInput" />
  1. 在其它的地方(通常是事件处理代码里),通过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)是一种很棒的办法,用来往一个指定的子实例发送一个不适于使用响应式propsstate传递的消息。你不应当在抽象数据流的时候到处使用引用。正常情况下,尽可能使用响应式数据流,仅仅在某些不使用响应式处理的场合使用引用。

小贴士:

  • 你可以在你的组件类中定义任意的公开方法(譬如给一个输入组件增加一个reset方法),然后你可以通过引用来调用这种公开方法(例如this.refs.myTypeahead.reset())。在大部分情况下,使用标准的React数据流来代替命令式的使用引用会更为清晰。

  • 进行DOM测量几乎总是需要去直接使用一个“原始”组件譬如<input/>并且直接通过引用访问它的底层DOM节点。引用是完成这种需求的一种可靠方案。

  • 引用会自动为你管理好!如果子组件被销毁,它的引用也会被销毁。这样你就不必担心内存问题(除非你做了一些疯狂的事情,譬如你自己一直要保持引用)

注意:

  • _永远_不要在组件的render方法——或者当render方法还在调用栈中任意位置执行的时候——访问引用。

  • 如果你想在Google Closure Compiler的高级模式下避免问题,你不能访问用字符串形式声明的属性。这表示如果你定义了ref="myRefString',你必须以this.refs['myRefString']的形式来访问引用。

  • 如果你对于React并非经验丰富,你一开始使用引用可能只是为了快速实现某些功能。如果是这种情况,建议你花一点时间仔细考虑一下状态应该保存在组件层次中的哪个部分。通常情况下,这种需求都可以通过在较高层次中保存状态来解决。这样通常你都能排除掉不合理的对引用的使用——大部分情况下正常的数据流就可以满足你的目标。

  • 对于stateless function来说引用不会被加载,因为无状态组件并没有一个对应的实例。你可以使用标准的复合组件来包装一个无状态组件来在其上附加引用。

译注:给RN开发者的特别说明。

本文翻译自React官方文档。因为关于refs的问题很多人会问到,因此特地翻译这篇文章供大家阅读。

在这里补充一些针对ReactNative的不同之处供大家参考:

  1. React Native中没有ReactDOM.render,而是通过AppRegistry来注册根组件。这意味着你无法通过ReactDOM.render的方式获得根组件的引用。要获得根组件的引用,你只有在根组件的方法中使用this来获得。

  2. React Native中没有DOM组件,也没有findDOMNode,因为RN的最基础组件是NativeComponent而不是HTML DOM。NativeComponent也有一些额外方法可以调用,可以在NativeMethodsMixin文档中找到

[去论坛发表意见]