ref as we know, in fact, it can be the reference is a component, can also be said to be a sign. As an attribute of a component, its attribute value can be a string or a function. In fact,

, the use of ref is not necessary. Even in its applicable scenario, it is not impossible, because the functionality implemented using ref can also be translated into other methods. However, since ref has its applicable scenarios, that is, ref has its own advantages. About this point and the application scenario of ref, this is what the official document says: after

returns to UI structure from render method, you may want to rush out of the limit of React virtual DOM, and add some methods to the component instances returned by render. Generally speaking, this is not necessary for data flow in application, because the active Reactive data stream always ensures that the latest props is passed to every sub level from render () output. However, there are still a few scenes in this way is a must, or be useful: DOM marker components render the search (can be regarded as identification ID DOM), in a large non React applications using React components or your existing code into React.

let's see such a scene (the following examples are often used to explain ref, visible below the description of the scene should be more classic): an event by < input /> the value of the element is set to an empty string, then the < input /&; gt; onfocus.

 var App = React.createClass (function (return) {getInitialState: {{userInput:},''}; handleChange: function (E) {this.setState ({userInput:});}, clearAndFocusInput: (function) {this.setState ({userInput:''}); / / set the value for the empty string to achieve focus here / / render: (function) {}, return (< div> < input value={this.state.userInput} < onChange={this.handleChange} /> input type= "button" value= "Reset And Focus" onClick={this.clearAndFocusInput} /> < /div>});}); 

in the example above, we have achieved the click of a button to notify the input element value is set to null String, but it has not been implemented to make the input element focus. This is a bit difficult, because in render (), it is not a combination of the actual subcomponents, only a description of a particular time specific instance. This sentence feels pretty round, and actually render returns a virtual DOM, not a real DOM. So we don't need to just look at those components that return from render ().

says this, it doesn't help us much to achieve the focus. To achieve the focus of this function we need to implement it with the help of ref. We mentioned that there are two types of ref values, one is a string and the other is a callback function. The attribute

React on

ref string supports a special attribute. You can add this attribute to any component returned by render (). This means that the component returned by render () is marked as a component instance that can be conveniently located. This is the role of ref.


 < input described as "myInput"; ref= /> 

to access the instance, can be accessed through the this.refs:


in the previous version, we can use React.findDOMNode (this.refs.myInput) to access components DOM. But now, the findDOMNode function has been abandoned, and this.refs.myInput can be used directly for access. The

ref callback function

ref attribute can also be a callback function rather than a name. This function will be executed immediately after mounted component. This reference component will be used as a parameter of the function. This function can use this component parameter immediately, and of course, it can be saved for future use.

, its form is simple:

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



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

;}), it should be noted, when the reference component is when the ref uninstall and change the parameters of the previous ref value

This concludes the body part