The common structure and function of react in development

I. React what algorithms, what virtual DOM, what core content online a lot, please Google yourself.

But the algorithm can be made clear, virtual Dom to say a clear chat. for development and no eggs, it is better to have some dry to see how to use.

Two. The structure is as follows:

Import reqwest from ' Reqwest '; import React from' React '; import Reactdom from' React-dom ';varHeader =React.createclass ({handleclick:function() {Console.log ( This. Refs.head); Console.log (Reactdom.finddomnode ( This. Refs.head)); }, Render:function(){     return (      <div style={{backgroundcolor: ' Blue '} onclick={ This. Handleclick} ref= ' head ' > <p>header components </p> </div>     )   }})varComponentdemo =React.createclass ({//default stategetinitialstate () {return{current:1, Openkeys: [], Result_data: {}}; },//Default PropsGetdefaultprops () {return{key:{value:2        }      }; },  //static method call Componentdemo. Getbusinessname ()statics:{getbusinessname:function(){       returnConsole.log (' Getbusinessname method is called ... ‘)}}, Handleclick (e) {Console.log (' Div is clicked ... ‘); Console.log ( This. Refs.cct); Console.log (Reactdom.finddomnode ( This. Refs.cct)) }, Componentdidmount:function() {    //Asynchronous Requestreqwest ({URL:' Http://localhost:90/menu ', Method:' Get ', type:' JSON '}). Then (Result= {      if( This. ismounted ()) {         This. SetState ({result_data:result.data}); }          },function(Err, msg) {Console.log (err) Console.log (msg)}); //using propsConsole.log ( This. Props.key.value)}, Componentwillreceiveprops (nextprops) {//It was triggered when the new props was accepted.}, Render () {return (      <div>  This. Handleclick}&GT;CCT Parts </div> </div>    ); }}) Reactdom.render (<componentdemo/>,document.getelementbyid (' contain '));

This example involves several points of knowledge commonly used in development.

1.improt Such introduction is ES6 syntax, can also require

2.Header is a component, the creation of components using React.createclass ({}), ES6 also have other wording, anyway, I'm not used to

3. Each component requires a render function, and return can contain only a top-level label, which we typically wrap with a div. And the component name should start with uppercase.

The 4.refs properties can help us break through the limitations of the virtual DOM, get to the DOM structure, but do not use a similar language on the Chinese Web: This.refs.xxx.getDOMNode (), because such a notation is not supported.

The This.refs.XXX is used to obtain the react structure.

We should use the method provided by React-dom specifically to manipulate the DOM: Reactdom.finddomnode (This.refs.XXX).

This.refs.XXX and Reactdom.finddomnode (This.refs.XXX) are different, although sometimes we print out the same sometimes.

5. Of course, the core of react is a state machine. Getinitialstate (called only once during component initialization) is used to initialize the state, and we can modify the state by This.setstate (). Each modification of the state starts with the render function.

6.getDefaultProps This function can help us to set up a constant data structure in order to get access. The equivalent defines a constant.

7.statics is used to top a static method, we can define various functions and pass Componentdemo. Getbusinessname () method to invoke. Structure: Name of the component. Function name

8. The most important event mechanism is also present, as in the case of the onclick, the large-sector event mechanism is supported.

9.componentDidMount (called only once at the end of component rendering) This function is related to the life cycle of the component. We usually do things like asynchronous requests.

Componentwillmount (called only once before the component performs the initialization rendering) is exactly the opposite of the above.

There are several other, personal understandings for the components to enter, start, and leave the hooks.

Shouldcomponentupdate (Object Nextprops,boject nextstate) (triggered when a function has a new props or state) This hook will primarily manage whether the component is updated and returns a Boolean value. The default is true, which is not recommended for general use.

10. The component must also be a CSS touch-up. However, adding a style here must be written as an object, and if it is a number, the default unit is PX.

other properties must be in hump format : style={{backgroundcolor: ' Red '};

Class must be written in classname.

11.isMounted () is used to determine whether a component has been inserted into the DOM. After a general request, it is strongly recommended that you modify the state after you decide whether to insert the DOM.

Never change it directly this.state , because later calls setState() may replace the changes you make. to act this.state as immutable.

setState()Does not change immediately this.state , but instead creates a state transition that is about to be processed. The value obtained after the method is called this.state may get an existing value instead of the most recently set value.

setState() The synchronization of calls is not guaranteed , and in order to improve performance, state transitions and DOM rendering may be performed in batches.

setState()Will always trigger a redraw unless shouldComponentUpdate() conditional rendering logic is implemented in. If you use a Mutable object, but you cannot shouldComponentUpdate() implement this logic in, the call avoids unnecessary re-rendering only if there is a difference between the new state and the previous state setState() .

The above only belongs to personal humble opinion, if the fault, welcome point!

The common structure and function of react in development