React is just your line.

React originated in Facebook's internal project, a JavaScript library for building user interfaces, equivalent to the V-layer framework in the MVC architecture, and unlike other frameworks on the market, React each component as a state machine, Within the component, the state of the component is maintained to maintain changes in the status of the components, and when the state of the component changes, the react uses virtual DOM technology to incrementally and efficiently update the real DOM. This article will briefly introduce these characteristics of react.

A simple react component--helloreact

Considering that some students have not known react, we first to write a simple react components, let everyone a glimpse of fast!

// Create a Helloreact component var Helloreact = React.createclass ({    render:function() {        return  (             <div>                 Hello React!            </div>        )    }); // using the Helloreact component Reactdom.render (    ))

This defines a react component, of course, to run this code is conditional, need to introduce the react library, but also need to introduce JSX syntax conversion Library, here not much to say, these basic things need you to practice only good!

React Core Technology-Virtual Dom

In the process of front-end development, one of the things we often do is to update the changed data to the UI in real time, then we need to update and re-render the DOM, and frequent DOM operations are often the cause of the performance bottleneck, sometimes we encounter such an embarrassing situation: for example, there is a list of data, When the user performs a refresh, Ajax requests the data back from the background, even if the newly requested data is exactly the same as the last time, and the DOM is updated all over and re-rendered, creating an unnecessary performance overhead.

React introduced the virtual DOM mechanism for this: For each component, react constructs a corresponding DOM tree in memory, and all DOM constructs are made from the virtual DOM, based on react development, and whenever the state of the component changes, React will reconstruct the entire DOM data, then compare the current entire DOM tree with the previous DOM tree, draw a portion of the DOM's structural changes (PATCHS), and then update the PATCHS to the real DOM. The whole process is done in memory, so it's very efficient. Using a graph can clearly show how the virtual DOM works:

The life cycle of React

React each component as a state machine to maintain and manage, so each component has a complete set of lifecycles that can be broadly divided into three processes: Initialize, update, and destroy. Each process in the life cycle clearly reflects the state of the component. For development, it is easy to grasp the components of each state, different state of the time to do the corresponding things, non-interference. Here are a few methods related to the life cycle of the component:

getdefaultprops--when a component is created

getinitialstate--Component Instantiation State

componentwillmount--Component Pre-mount

After the componentdidmount--components are mounted

componentwillreceiveprops--Component properties are changed

Whether the shouldcomponentupdate--component is updated

Before componentwillupdate--Component Update

After the componentdidupdate--component is updated

componentwillunmount--Components before destruction

Initialization

For an external system, the component is a standalone, closed-systems, internal logic is hidden, exposing only the interface that transmits the data, and react provides us with two ways to pass data to the component, namely props and state.

Props is passed by the Label property XXX when calling Reactdom.render (), and then obtained through THIS.PROPS.XXX, Getdefaultprops allows you to set a default props value for the component, Displays the default value without passing the props.

//Creating Helloreact ComponentsvarHelloreact =React.createclass ({/** * Show default value when setting props default worth not delivered * @return {}*/Getdefaultprops:function(){       return{data:"No Data"       }    },Render:function(){        return (            <div>//displays data, which is automatically updated when the props is changed{ This. Props.data}</div>        )    }});//Pass Props Property dataReactdom.render ())

Unlike props, state cannot be passed externally, so you need to set a default value for state in Getinitialstate before using state. Then it can be accessed via this.state.xxx, and when the component is mounted, the Componentdidmount method is triggered, where we can request the server data via Ajax and then set the value of state to real data through the SetState ().

//Creating Helloreact ComponentsvarHelloreact =React.createclass ({/** * Set initial value of component * @returns {{data:array, msg:string}}*/getinitialstate:function(){        return{data:"Data Loading ..."//the initial value is []        }    },    /** * Loading data for the first time after mounting*/Componentdidmount:function(){         This. RequestData ();//Request Data    },    /** * Request background Data*/RequestData:function() {$.ajax ({URL:' Xxxx.ashx ', data:{}, Success:function(data) { This. SetState ({data:data//Update server data with SetState ()})}}.bind ( This) }, Render:function(){        return (            <div>               { This. State.data}</div>        )    }}); Reactdom.render ())

Update

The Props property is read-only and if you want to change the value of props, you can only pass the new props by calling Render () again, but be aware that the re-execution of the render () component is not re-mounted, but instead is incrementally updated and rendered through virtual DOM technology. The Componentwillreceiveprops method is also triggered, and the new props is passed as a parameter, where you can handle the new props.

Compared to Props,state is born to reflect the state of the component, so its value can be changed, when the value of state is changed, the value of state can be changed by SetState, react is also the use of virtual DOM technology to calculate the need to be updated parts, Instead of holding a full-body update and rendering.

When the status of props and state changes, the component will trigger a method called Shouldconponentupdate before it is updated, if Shouldconponentupdate returns True, Regardless of the props and state values and the last time there is no change, react will be honest comparison. At this point, if you are sure and sure that two times the data has not changed, then let Shouldconponentupdate return false,react will not be a diff, and will not be re-rendered. The instant Saves the diff time, is not very witty to say.

Destroyed

When a component is removed from the DOM, react destroys it. Before the destruction, the careful react also triggered componentwillunmount to inform you, see if you finally have anything to say to this dying component, of course, you have nothing to do.

When to use props, when to use state

We already know that the data can be passed to the component through props and state two ways, props is read-only and cannot be changed, and the states are used to reflect the status of a component, which can be changed. Therefore, when the data required by the component is determined at the time of invocation and is not frequently changed, it can be passed using props, instead, when the data required by the component is not determined at the time of the call, it needs to wait for an asynchronous callback to be determined, such as the AJAX request data, the onchange event of input, At this point, you need to use state to record and change these worthwhile changes.

The reflection of React to the front end

The above is a simple understanding of react, react in the end how good? We need to rethink, in the era of WebApp bullying, all the best JS library to blossom, designed to solve the mobile performance problems and development efficiency. For a front-end developer, to keep up with the pace of the times, and can not be lost in the direction of these new things, whenever a new thing is launched, there must be a strong power behind the brand packaging. Therefore, for us can neither blindly worship, nor negative treatment, take its essence, to its dross, in the take and the house to find a balance, to broaden their horizons, because react is only your boundaries.

React is just your line.