Refs and the DOM

下面有一些恰当地使用refs的场景:

• 处理focus、文本选择或者媒体播放
• 集成第三方DOM库

如果可以通过声明式实现，就尽量避免使用refs。

例如，相比于在组件中暴露open()和close()方法，最好传递isOpen属性。

为DOM元素添加Ref

React支持给任何组件添加特殊属性。ref属性接受回调函数，当组件安装(mounted)或者卸载(unmounted)之后，回调函数会立即执行。

React将会在组件安装(mount)时，用DOM元素作为参数回调ref函数，在组件卸载()时，使用null作为参数回调函数。

对class设置ref回调函数是访问DOM元素的一种常见方法。首选的方式就是像上面的代码一样，对ref设置回调函数。还有更简洁的方式:ref={input => this.textInput = input}。

为用类(class)声明的自定义组件设置ref属性时，ref回调函数收到的参数是安装(mounted)的组件实例。例如，如果我们想包装CustomTextInput组件，实现组件在mounted后立即点击的效果:

需要注意的是，这种方法仅对以类(class)声明的CustomTextInput有效。

Refs与函数式Components

如果你需要使用ref，你需要将组件转化成class组件，就像需要生命周期函数或者state那样。

然而你可以在函数式组件内部使用ref来引用一个DOM元素或者class组件。

在你应用中，你可能会倾向于使用ref使得”事件发生”。如果这种情况下，花一点时间仔细考虑一下在组件层次结构中哪些地方需要state。通常情况下，应该在层次结构中较高级别中拥有state。有关这方面的实例参阅。

旧版API: String类型的Refs

如果你之前使用过React，你可能了解过之前的API:string类型的ref属性。类似于textInput，可以通过this.refs.textInput访问DOM节点。我们不建议使用，因为string类型的ref存在问题。已经过时了，可能会在未来的版本是移除。如果你目前还在使用this.refs.textInput这种方式访问refs，我们建议用回调函数的方式代替。