Shulou(Shulou.com)06/01 Report--

Reactjs, which originated from the internal project of Facebook, is a javascript library used to build a user interface, which is equivalent to the V-tier framework of MVC architecture. Different from other frameworks in the market, React regards each component as a state machine, and the component maintains the change of the state of the component through state. When the state of the component changes, React uses virtual DOM technology to incrementally and efficiently update the real DOM. This article will give a brief introduction to these characteristics of React.

A simple React component-- HelloReact

Considering that some students don't know React yet, let's write a simple React component for everyone to see!

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

/ / create a HelloReact component

Var HelloReact = React.createClass ({

Render:function () {

Return (

Hello React!

)

}

});

/ / use HelloReact components

ReactDOM.render (

Document.querySelector ('body')

)

This defines a React component, of course, to run this code is conditional, need to introduce React library, but also need to introduce JSX syntax conversion library, not to mention here, these basic things also need you to practice!

The Core Technology of React-- Virtual DOM (Virtual DOM)

In the process of front-end development, one of the things we often do is to update the changed data to UI in real time, and then we need to update and re-render DOM. Frequent DOM operations are usually one of the causes of performance bottlenecks. Sometimes we encounter such an awkward situation: for example, when a user performs a refresh operation, Ajax will re-request data from the background. Even if the newly requested data is exactly the same as last time, the DOM will be fully updated and re-rendered, resulting in unnecessary performance overhead.

React introduces virtual DOM (Virtual DOM) mechanism for this: for each component, React will build a corresponding DOM tree in memory. When developing based on React, all DOM construction is done through virtual DOM. Whenever the state of the component changes, React will reconstruct the entire DOM data, and then compare the current whole DOM tree with the last DOM tree to get the part of DOM structure change (Patchs). Then update these Patchs to the real DOM. The whole process is done in memory, so it is very efficient. Borrowing a diagram can clearly show how virtual DOM works:

React lifecycle

React maintains and manages each component as a state machine, so each component has a complete life cycle, which can be roughly divided into three processes: initialization, update, and destruction. Each process of the life cycle clearly reflects the change in the state of the component. For developers, it is easy to grasp each state of the component, do the corresponding things in different state periods, and do not interfere with each other. Here are several methods related to the component lifecycle:

one

two

three

four

five

six

seven

eight

nine

GetDefaultProps / / create build

GetInitialState / / instantiation status

ComponentWillMount / / before mounting

ComponentDidMount / / after mounting

When the componentWillReceiveProps / / property is changed

ShouldComponentUpdate / / whether to update or not

Before componentWillUpdate / / update

After componentDidUpdate / / update

Before componentWillUnmount / / destruction

Initialization

For the external system, the component is an independent closed system, the internal logic is hidden and only exposes the interface that transmits data to the outside, while React provides us with two ways to transfer data to the component, namely props and state.

Props is passed through the tag attribute xxx when calling ReactDOM.render (), and then obtained through this.props.xxx. GetDefaultProps allows you to set a default props value for the component and display the default value without passing props.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

/ / create a HelloReact component

Var HelloReact = React.createClass ({

/ * *

* display the default value when setting the default value of props when it is not passed

* @ return {}

, /

GetDefaultProps:function () {

Return {

Data: "No data yet"

}

}

Render:function () {

Return (

/ / display data, which will be updated automatically when props changes

{this.props.data}

)

}

}); / / pass props attribute data

ReactDOM.render (

Document.querySelector ('body')

)

Unlike props, state cannot be passed externally, so before using state, you need to set a default value for state in getInitialState before you can access it through this.state.xxx. When the component is mounted, trigger the componentDidMount method, where we can request server data through Ajax, and then set the value of state to real data through setState ().

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

/ / create a HelloReact component

Var HelloReact = React.createClass ({

/ * *

* set the initial value of the component

* @ returns {{data: Array, msg: string}}

, /

GetInitialState:function () {

Return {

Data: "data loading..." / / initial value is []

}

}

/ * *

* load data for the first time after mounting

, /

ComponentDidMount:function () {

This.requestData (); / / request data

}

/ * *

* request backend data

, /

RequestData:function () {

$.ajax ({

Url:'xxxx.ashx'

Data: {}

Success:function (data) {

This.setState ({

Data:data / / Update server data through setState ()

})

}

} .bind (this))

}

Render:function () {

Return (

{this.state.data}

)

}

});

ReactDOM.render (

Document.querySelector ('body')

)

Update

The props attribute is read-only. If you want to change the value of props, you can only pass the new props by calling render () again, but note that re-executing the render () component will not be remounted, but will be incrementally updated and rendered through virtual DOM technology. The componentWillReceiveProps method will also be triggered and the new props will be passed as a parameter, and you can process the new props here.

Compared to props,state, it is naturally used to reflect the state of components, so its value can be changed. When the value of state is changed, the value of state can be changed through setState. React also uses virtual DOM technology to calculate the parts that need to be updated, rather than initiating the whole body update and rendering.

When the state of props and state changes, the component will also trigger a method called shouldConponentUpdate before it is updated. If shouldConponentUpdate returns true, React will honestly compare the values of props and state regardless of whether the values of props and state have changed from the last time. At this point, if you are sure and sure that the data has not changed twice, then letting shouldConponentUpdate return false,React will not diff, let alone re-render. Save diff time in an instant.

Destroy

When a component is removed from the DOM, the React destroys it. Before destroying, the careful React also triggers componentWillUnmount to notify you to see if you have anything to say to the component that is about to be destroyed, of course you don't need it if you have nothing to do.

When to use props and when to use state

We already know that data can be passed to components through props and state. Props is read-only and cannot be changed, while state is used to reflect the state of a component and can be changed. Therefore, when the data needed by the component is determined at the time of the call and changes infrequently, you can use props to pass it. On the contrary, when the data needed by the component is not determined at the time of the call, you need to wait for an asynchronous callback to determine it, such as the ajax request data, the onchange event of input, then you need to use state to record and change these changes.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.