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

This article is about what react means to share with you. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Background knowledge of React

React is a JavaScript library for building a user interface, mainly used to build UI, rather than a MVC framework, but it can be easily used in existing projects using React as the View layer of the MVC architecture. It is a JavaScript library for building a user interface, originated from Facebook's internal project, used to build an Instagram website, and opened in May 2013. React has high performance, the code logic is very simple, more and more people have begun to pay attention to and use it.

In the past, when there was no ajax technology, the web page was rendered from the server to the html output to the browser for rendering. Similarly, a user's operation to change the page will also refresh the entire page to complete. Until the advent of ajax to achieve partial page refresh, web developers were amazed at the efficiency and separation it brought. But the subsequent problem is that complex user interaction and presentation need to be completed through a large number of DOM operations, which makes the performance of the page and the efficiency of development appear a new bottleneck.

Today, when it comes to front-end performance optimization, reducing DOM elements, reducing reflow and repaint, and minimizing DOM queries in the coding process are familiar. Any UI changes on the page are done through an overall refresh. Fortunately, React calculates the difference between the current version and the new version of the virtual page through its own DOM Diff algorithm, minimizes redrawing, avoids unnecessary DOM operations, solves these two recognized front-end performance bottlenecks, and realizes efficient DOM rendering.

We know that the performance consumption caused by frequent operation of DOM is very large, and React is fast because it does not directly operate DOM, but introduces the implementation of virtual DOM to solve this problem.

For the page update, React uses its own DOM Diff algorithm to compare and update the differences, which is reflected in the page is only redrawn the updated part, so as to improve the rendering efficiency.

Note: the following performance description is referred to from Youyuxi.

With regard to the performance of React, I would like to say a few words:

1. React has never said that "React is faster than native DOM". The basic mindset of React is to re-render the entire application every time there is a change. If there is no Virtual DOM, simply reset the innerHTML.

two。 When comparing performance, it is necessary to distinguish between different occasions such as initial rendering, small data update, and large data update.

3. Don't be naive to think that Virtual DOM is fast, diff is not free, and the real value of Virtual DOM is never performance, but it

1) opens the door for functional UI programming

2) you can render to scenes other than DOM, such as backend and native.

Componentization

In business development, when we encounter the common template part, we have to couple the template with the specified data format to implement the component. In React, we can use JSX syntax to encapsulate components, aggregate the structure, data logic and even styles of components together, and define components more simply, clearly and intuitively.

With the implementation of componentization, we can intuitively divide a complex page into several independent components, and then combine these independent components to complete a complex page. This not only reduces the logic complexity, but also realizes the reuse of the code.

React Foundation

Template


 

 / * * ReactDOM.render is the most basic method of React, which is used to convert the template into HTML language, * and insert the specified DOM node. * * / ReactDOM.render (
 Hello, document.getElementById ('example') 
); 
 


JSX

The code in the previous section, HTML, is written directly in JavaScript without any quotation marks. This is the syntax of JSX, which allows HTML to be mixed with JavaScript.

Benefits of JSX:

1. What are the benefits of using JSX syntax to encapsulate components:

1) familiar code

2) more semantic

3) more abstract and intuitive

two。 A few points to pay attention to:

1) the top-level element of return in the render method can only be one.

2) if you want to define a style, you can't write it this way.

/ / do not make a similar error, style= "opacity: {this.state.opacity};"

3) use className and htmlFor to replace the corresponding class and for

Tip: on the topic of componentization, if you are interested, you can continue to pay attention to the writing of components such as Vuejs, Web components and so on. / * * with the emergence of a more complex multi-terminal environment, there is still more room for imagination in component standardization. The component definition of React is not the end point, nor is it necessarily a standard, but it will leave a profound de impact on the road of componentization. * * /

Basic JSX syntax:

Var names = ['Alice',' Emily', 'Kate']; 

 ReactDOM.render (
 
 {names.map (function (name,key) {
 return Hello, {name}! 
}) 
} 
, document.getElementById (' example') 
)

The above code embodies the basic syntax rules of JSX: if you encounter a HTML tag (starting with <), you will parse it with HTML rules; if you encounter a code block (starting with {), you will parse it with JavaScript rules.

JSX allows you to insert JavaScript variables directly into the template. If the variable is an array, all members of the array are expanded.

Var arr = [
 Hello worldview, React is awesome, 
]; 
 ReactDOM.render (
 {arr}, document.getElementById ('example') 
)

module

1. Concept

React allows code to be encapsulated as a component and then inserted into a web page just like a normal HTML tag. The React.createClass method is used to generate a component class

two。 Code example

Var HelloMessage = React.createClass ({render: function () {return Hello {this.props.name};}}); ReactDOM.render (, document.getElementById ('example')); var HelloMessage = React.createClass ({render: function () {return Hello {this.props.name};}}); ReactDOM.render (, document.getElementById (' example'))

This.props.children

The properties of the this.props object correspond one-to-one to the properties of the component, with one exception, the this.props.children property. It represents all child nodes of the component

Var NotesList = React.createClass ({render: function () {return ({/ * because the return value of this.props.children returns undefined,object,array based on the number of child nodes. * so react provides a react.Children method for dealing with this.props.children * * / React.Children.map (this.props.children, function (child) {return {child};});}}); ReactDOM.render (helloworld, document.getElementById ("example"))

PropTypes

The properties of a component can accept any value, including strings, objects, functions, and so on. Sometimes we need a mechanism to verify that the parameters provided by others meet the requirements when using the component. The PropTypes property of the component class is used to verify that the properties of the component instance meet the requirements.

Var MyTitle = React.createClass ({propTypes: {/ * * declares that the title attribute is required, and the data type should be a string, which is equivalent to the normalized interface document * * / title: React.PropTypes.string.isRequired,}, render: function () {return {this.props.title};}}); var data = "123"; ReactDOM.render (, document.getElementById ("example"))

Error demonstration:

Var data = 123 position ReactDOM.render (, document.body)

GetDefaultProps

The getDefaultProps method can be used to set the default value of a component property

Var MyTitle = React.createClass ({getDefaultProps: function () {return {title: "hello world"}}, render: function () {return {this.props.title};}}); / / var data = "123"; ReactDOM.render (, document.getElementById (" example "))

Get the real DOM node

A component is not a real DOM node, but a data structure that exists in memory, called virtual DOM (virtual DOM). Only when it is inserted into the document will it become a real DOM. According to the design of React, all DOM changes first occur on the virtual DOM, and then the actual changes are reflected in the real DOM. This algorithm is called DOM diff, which can greatly improve the performance of web pages.

Var MyComponent = React.createClass ({handleClick: function () {this.refs.myTextInput.focus ();}, render: function () {return ();}}); ReactDOM.render (, document.getElementById ('example'))

This.state

Components inevitably interact with users. One of the major innovations of React is to regard components as a state machine, starting with an initial state, and then user interaction, resulting in state changes that trigger re-rendering of UI. React treats components as a state machine (State Machines). Achieve different states by interacting with the user, and then render the UI to keep the user interface and data consistent. In React, you only need to update the state of the component and then re-render the user interface according to the new state

Var LikeButton = React.createClass ({getInitialState: function () {/ * * set initial value of state * * / return {liked: false};}, handleClick: function () {/ * * change state * * / this.setState ({liked:! this.state.liked});}, render: function () {var text = this.state.liked? Like: don't like; return (you {text} him. Click to switch.

);}}); ReactDOM.render (, document.getElementById ('example'))

Because both this.props and this.state are used to describe the characteristics of components, confusion can occur. A simple way to distinguish is that this.props represents features that, once defined, no longer change, while this.state is a feature that changes as users interact.

Var Input = React.createClass ({getInitialState: function () {return {value: 'hellograms'};}, handleChange: function (event) {this.setState ({value: event.target.value});}, render: function () {var value = this.state.value; return (

{value}

);}}); ReactDOM.render (, document.body)

Component API

There are seven methods for the component:

Setting status: setState

Replacement status: replaceState

Set the property setProps

Replace property replaceProps

Force update: forceUpdate

Get DOM node: getDOMNode

Determine the mount status of the component: isMounted.

Component life cycle

Initialization

GetDefaultProps: sets the default value

GetInitialState: setting the initial state

ComponentWillMount: (components are about to be loaded)

Render (rendering)

ComponentDidMount: the component has been loaded and will only start when the first component is called

In operation

ComponentWillReceiveProps before receiving the property when the component is about to receive the property

ShouldComponentUpdate is called before receiving a new props or state and is about to render. This method is not called when the rendering is initialized

Before componentWillUpdate render triggers, update

Render rendering

ComponentWillUnmount is called as soon as the component is removed from the DOM

Destroy

ComponentWillUnmount is called as soon as the component is removed from the DOM

Var Hello = React.createClass ({getInitialState: function () {return {opacity: 1.0};}, componentDidMount: function () {this.timer = setInterval (function () {var opacity = this.state.opacity; opacity-= .05; if (opacity < 0.1) {opacity = 1.0;} this.setState ({opacity: opacity}) } .bind (this);}, render: function () {return (Hello {this.props.name});}}); ReactDOM.render (, document.body)

Because the React component style is an object, the first bracket indicates that this is the JavaScript syntax, and the second bracket indicates the style object.

Ajax

The above code does not use jQuery to complete the Ajax request for ease of illustration. React itself doesn't have any dependencies, so you can use other libraries instead of jQuery.

Var Input = React.createClass ({getInitialState: function () {return {users: []}}, componentDidMount:function () {var _ this = this; $.get ("http://localhost:8080/users?act=get",function (data) {console.log (data); _ this.setState ({users:data});});}, render: function () {var users = this.state.users Console.log (users); return {users.map (function (user,key) {return {user.firstName} {user.lastName})}}); ReactDOM.render (, document.getElementById ("test")); Thank you for reading! This is the end of the article on "what does react mean?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.