在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new props 重新呈现它。但是，在某些情况下，需要在典型数据流之外强制修改子项。要修改的子项可以是React组件的实例，也可以是DOM元素。对于这两种情况，React都提供了api。
何时使用refsrefs有一些很好的用例：
1.文本选择或媒体播放。
2.触发势在必行的动画。
3.与第三方DOM库集成。
避免将refs用于可以声明性地完成的任何操作。
*不要过度使用Refs
旧版API：字符串引用如果您之前使用过React，那么您可能熟悉一个旧的API，其中ref属性是一个字符串"textInput"，并且DOM节点被访问为this.refs.textInput。建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。
回调引用当组件安装时，React将使用DOM元素调用ref回调，并在卸载时调用null。
在componentDidMount或componentDidUpdate触发之前，Refs保证是最新的.
class CustomTextInput extends React.Component { constructor(props) { super(props); this.textInput = null; this.setTextInputRef = element => { this.textInput = element; }; this.focusTextInput = () => { // Focus the text input using the raw DOM API if (this.textInput) this.textInput.focus(); }; } componentDidMount() { // autofocus the input on mount this.focusTextInput(); } 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={this.setTextInputRef} /> <input type="button" value="Focus the text input" onClick={this.focusTextInput} /> </div> ); } }
refs例子--点击获取input焦点
class Example extends React.Component { handleClick() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus (); } render() { // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs return ( <div> <input type="text" ref="myInput" /> <input type="button" value="点我输入框获取焦点" onClick={this.handleClick.bind(this)} /> </div> ); } }
使用React.createRef()React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React，我们建议您使用回调引用。
创建React.createRef()
Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } }
访问ref
当ref被传递给元素时render，对该节点的引用变得可以在currentref 的属性处访问
const node = this.myRef.current;
ref的值根据节点的类型而有所不同
当在refHTML元素上使用该属性时，ref在构造函数中创建的属性将React.createRef()接收底层DOM元素作为其current属性。
在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例作为其current。
您可能无法ref在函数组件上使用该属性，因为它们没有实例。
class CustomTextInput extends React.Component { constructor(props) { super(props); // create a ref to store the textInput DOM element this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } focusTextInput() { // Explicitly focus the text input using the raw DOM API // Note: we're accessing "current" to get the DOM node this.textInput.current.focus(); } render() { // tell React that we want to associate the <input> ref // with the `textInput` that we created in the constructor return ( <div> <input type="text" ref={this.textInput} /> <input type="button" value="Focus the text input" onClick={this.focusTextInput} /> </div> ); } }
current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。
无法在函数组件上使用ref属性
function MyFunctionComponent() { return <input />; } class Parent extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); } render() { // This will *not* work! return ( <MyFunctionComponent ref={this.textInput} /> ); } }
**如果需要引用它，则应该将组件转换为类，就像您需要生命周期方法或状态时一样。
但是，只要引用DOM元素或类组件，就可以在函数组件中使用该ref属性：**