React版本：15.4.2
**翻译：xiyoki **
在典型的React数据流中，props是父组件与其children交互的唯一方式。要修改child，你需使用新的props重新渲染父组件。但是，在一些情况下，你需要在典型的数据流之外强制修改child。要修改的child可以是React组件的实例，也可以是DOM元素。对于这两种情况，React提供了一个 escape hatch（安全舱口; 逃口）。
When to Use Refs
几个好的refs使用案例：
- 管理焦点、文本选择框或媒体重放。
- 触发命令式动画。
- 与第三方DOM库集成。
避免在可声明的事物上使用refs。
例如，不在Dialog组件上暴露open()和close()方法，而是向它传递isOpen属性。
Adding a Ref to a DOM Element
React支持你附加一个特殊的属性到任何组件。该ref属性接收一个回调函数作为参数，在组件被mounted或unmounted后，该回调就被立即执行。
当在HTML元素上使用ref属性时，ref回调接收基础DOM元素作为参数。例如，此代码使用ref回调来储存对DOM节点的引用：
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}
focus() {
// Explicitly focus the text input using the raw DOM API
this.textInput.focus();
}
render() {
// Use the `ref` callback to store a reference to the text input DOM
// element in an instance field (for example, this.textInput).
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}
当组件mounts时，React会调用ref回调，并向其传入DOM元素。当组件unmounts时，React会调用ref回调，并向其传入null。
使用ref回调为类设置一个属性，是访问DOM元素的常见模式。首选方法是在ref回调中设置属性，就像上面的例子。甚至有一个简便的书写方式：ref={input => this.textInput = input}。
Adding a Ref to a Class Component
当ref属性被用在自定义类组件上时，ref回调接收已mounted的组件实例作为参数。例如，如果我们想在CustomTextInput上包裹一圈，模拟组件mounting后，它直接被点击：
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}
render() {
return (
<CustomTextInput
ref={(input) => { this.textInput = input; }} />
);
}
}
注意，只有CustomTextInput被声明为类时才有效：
class CustomTextInput extends React.Component {
// ...
}
Refs and Functional Components
你不能（在引用功能组件时）在功能组件上使用ref属性，因为功能组件没有实例：
function MyFunctionalComponent() {
return <input />;
}
class Parent extends React.Component {
render() {
// This will *not* work!
return (
<MyFunctionalComponent
ref={(input) => { this.textInput = input; }} />
);
}
}
如果你需要一个ref，你应该将组件转换为一个类，就像你需要声明周期方法或状态时一样。
但你可以在功能组件内部使用ref属性，只要是涉及DOM元素或类组件：
function CustomTextInput(props) {
// textInput must be declared here so the ref callback can refer to it
let textInput = null;
function handleClick() {
textInput.focus();
}
return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
Don't Overuse Refs（不要过度使用Refs）
你使用refs的第一个倾向可能是让事情在你的应用程序中发生。如果是这种情况，请花一点时间，着重考虑状态应该在组件层次结构的什么位置。通常，拥有该状态的适当位置在组件层次结构中的层级更高。
Legacy API: String Refs（旧版API:字符串Refs）
如果你之前使用过React，你可能会熟悉一个较旧的API,其中ref属性是一个字符串，如像"textInput",DOM节点被这样访问this.refs.textInput。我们建议不这样使用。因为字符串引用有一些被认为是遗留的问题，并且可能在未来的一个版本中被删除。如果你目前正在使用this.refs.textInput访问refs,我们建议你使用回调模式。
Caveats（注意）
如果ref回调被定义为内联函数，它将在更新期间被调用两次，第一次调用传入null,第二次调用传入DOM 元素。这是因为函数的新实例是通过每次渲染创建的，因此React需要清除旧的引用并设置新的引用。你可以通过将ref回调定义为类上的绑定方法来避免这种情况，但请注意，在大多数情况下它不重要。
网友评论