[Web Front end] React Advanced Tutorials (ES6)--(2) understanding of the latest changes in refs

cp:53384561

1. What is refs in Reactjs

In react, a component is not a real DOM node, but rather a data structure that exists in memory called the virtual DOM

DOM). Only when it is inserted into the document will it become the real DOM. According to React's design, all DOM changes are first

Occurs on the virtual DOM, and then the actual changes are reflected on the real DOM, which is called Dom diff, which

Can greatly improve the performance of Web pages.

If we want to be in the virtual Dom (at this point the DOM is not converted to true DOM), take an element, at this time cannot pass

JS's getelementbyxxx this form.

2.ReactJS Pre-procedure

Early in the virtual DOM phase takes elements, the syntax is as follows:

function Hello () {    Handleclick:function() {       this. Refs.myinput.fucus ();    }     return <input ref= "Myinput"/>}

From the above we can know that refs can be passed. [Refsname] to get the elements in the virtual DOM.

3.ReactJS the latest version, for the definition of refs

The definition of refs has not changed in the latest version, but the use of syntax has changed a lot.

Now, refs in the component is a callback function.

This function, in the component generation period (mounted)

is automatically executed, the parameters of this callback function are the elements themselves:

function Hello () {   Handleclick:function() {   }   return <input ref={(input) =>{this. myinput=input;}} />}

In this example, the function of ref passes in the INPUT element itself and assigns the this.myinput to the INPUT element itself.

The destruction period of the element (unmounted) is also performed, but at the time of destruction, only NULL is returned.

[Web Front end] React Advanced Tutorials (ES6)--(2) understanding of the latest changes in refs