Reactjs Learning Series (use of React ref)

In the process of learning react, I always get confused by some nouns, but it is very simple to think about it, such as the react-defined refs, which is actually a way to get the DOM.

In react, a component is not a real DOM node, but rather a data structure that exists in memory, called the virtual Dom. Only when it is inserted into the document will it become the real DOM. According to the design of React, all DOM changes occur first on the virtual DOM, and then the actual changes are reflected in the real DOM, which is called Dom diff, which can greatly improve the performance of the Web page.

 var  mycomponent = React.createclass ({ Handleclick:  function   () { this  .refs.mytextinput.focus (); }, Render:  function   () { return   ( <div> <input type= "text" ref= "my TextInput "/> <input type=" button "value=" Focus the text input "Onclick={this.handleclick}/> </div> <mycomponent/>, document.getElementById (' Example '  

In the code above, the child nodes of the component mycomponent have a text input box to get the user's input. At this point, the real DOM node must be obtained, and the virtual DOM cannot be entered by the user. In order to do this, the text input box must have a ref attribute and then this.refs. [RefName] will return this true DOM node.

With this ref we can also get input values of input. It's that simple.

But in the process of use we remember: due to this.refs. The [RefName] property gets the real DOM, so you must wait until the virtual DOM is inserted into the document before you can use this property, or you will get an error. In the above code, by specifying the callback function for the Click event for the component, it ensures that the this.refs is not read until the Click event occurs in the real DOM. [RefName] property.

Original link: http://blog.csdn.net/jiangbo_phd/article/details/51758148

Reactjs Learning Series (use of React ref)