preface

As front-end technology evolves, so do front-end frameworks, but ultimately the most powerful factor underpinning the popularity of each Web framework is its ability to better serve the business. React is no exception. The developers of React were working on an advertising system for Facebook. Not satisfied with any CURRENT MVC framework, they wrote their own UI framework, and the famous React was born. React has revolutionized web development, and many developers have been working around the clock just to experience the thrill of React. This article will give you a taste of React’s philosophy, features and feelings.

1. React is not an MVC framework

React is different from other MVC frameworks such as AngularJS and Backbone. It only focuses on the VIEW layer (V in MVC). React is a library for building front-end reusable UI components. React updates and renders components in a timely and efficient manner. For increasingly complex front-end interfaces, especially for Web applications with constantly changing data, React effectively reflects changing data on the page.

Here’s a quote from the React doc:

We built React to solve one problem: building large applications with data that changes over time.

2. Use JSX instead of HTML templates

JSX is one of the core concepts behind React. JSX is not a new language. It is an extension of the JavaScript language, but does not change the syntax of JavaScript. JSX uses an XML-based approach to express the nesting of components, keeping the structure consistent with HTML, and syntactically consistent with Javascript, except for the special aspects of describing components. And eventually React will compile all JSX to JS.

Let’s start with a small example:

var element = 
       

        
        
Hello World
    
       
;
ReactDOM.render(element, document.body);Copy the code

React implements the ability to embed HTML directly into JavaScript. Most of us were skeptical when we first encountered JSX syntax, because for years we’ve been emphasizing MVC, the presentation layer and the logical layer should be separated. The purpose of using HTML templates is to avoid coupling the presentation layer with the logical layer. But the use of JSX in React takes us back overnight to pre-liberation. What are the benefits of using JSX?

In fact, the original purpose of using HTML templates was to make the presentation layer more independent, so that it would be easier to modify THE HTML without looking at the logical code. However, as Web applications have become more complex, the logical layer code corresponding to templates is also heavily dependent on the template DOM structure, resulting in a serious coupling between the presentation layer and the logical layer, and the original idea of simply modifying the interface without looking at the logic has been broken. In other words, the presentation and logic layers are still inseparable. Furthermore, many new concepts have to be introduced in order for templates and logic to work well together. Taking AngularJS as an example, AngularJS does structurally separate the presentation layer from the logical layer, but HTML has a lot of tag attributes mixed in, and beginners who don’t understand the syntax of AnjularJS don’t understand the meaning of tag attributes in HTML. Thus the difficulty and cost of learning are also greatly increased.

Here we get a sense of how React uses JSX differently. JSX uses XML markup to declare interface directly, but does not add other unknown syntax and markup, which not only reduces learning cost and enables beginners to learn React faster, but also makes the written code more readable and easier to understand.

React recommends using JSX, but it’s not necessary. It’s possible to use JavaScript entirely, but JSX is pretty straightforward when it comes to defining html-like tree structures. Here’s an example of how not using JSX compares to developing with JSX:

# Do not use JSX React.render(react. createElement('div', null, react. createElement('div', null, react. createElement('div', null, React.createElement('div', null, 'Hello World') ) ), document.body ); Use JSX to create a simple HTML tree like react. render(
       

        
        

            
         

          Hello World
         
        
        
    
       
,
    document.body
);Copy the code

So, if there’s such a good thing as JSX, why not?

3. Everything is a component

Components, reusable UI parts that are individually packaged. Components are also one of the core ideas of React. React lets us redesign the interface to define any module that functions independently as a component. Each component through continuous reuse, combination and nesting, etc., constitute a complete SET of UI interface. So the React interface is all components.

The concept of a component is not difficult to understand; the most important thing is the interaction between components. React provides a Render method for each component, which returns an instance of the component. Components have two important concepts: props and state, which are used to describe the state of the component. Props is an interface for components to interact with other components. It is a way for a parent to transfer data to a child. React views a component as a state machine. It interacts with the user to achieve different states and then re-renders the component, allowing the UI to change with data in a timely and efficient manner.

The following is an example of using state and props in a component. We can set state in the parent component and pass it to the child component by using props on the child component.

var MainCom = React.createClass({
  getInitialState: function() {
    return {
      message: "Learn React",
      link: "https://facebook.github.io/react/"
    };
  },
 
  render: function() {
    return (
      
       

        
        
      
       
); }}); var Message = React.createClass({ render: function() { return (
{this.props.message}
); }}); var Link = React.createClass({ render: function() { return (
        {this.props.link}
      ); }}); ReactDOM.render( , document.getElementById('main-container') );Copy the code

The componentized approach brings about separation between UI functional modules. For the MVC development pattern, developers will implement the separation of presentation layer, data layer, and control layer. React is a completely new idea. Developers divide the UI into different components from a functional point of view, and each component is individually encapsulated.

4. Virtual DOM improves performance

In traditional Web development, we usually use JS or jQuery to manipulate THE DOM to reflect the constantly changing data on the page in real time. With the increase of the logical complexity of the page, frequent and large DOM operations tend to result in low performance of the website and the code becomes more and more difficult to maintain. Even if you use the MVC framework to reframe your code, there’s no way to reduce the state you maintain, which means you can’t reduce DOM manipulation.

Then came the MVVM pattern, where the bidirectional binding engine automatically updates the view when the state is updated through bidirectional binding of the view template to the state. MVVM mode greatly reduces the logic of view updates, i.e. DOM manipulation. The problem with this approach is that every time there is a state change, the template engine rerenders the entire view, replacing the old view with a new one. We know that this has a performance impact because even a small change will cause DOM to be re-rendered.

In React’s mind, you don’t need to manipulate the DOM at all. React introduced a new concept, the virtual DOM. When developing with React, all DOM constructs are implemented using the virtual DOM. Whenever data changes, React reconstructs the DOM tree and compares the newly constructed DOM tree with the previous DOM tree (using the React DOM Diff algorithm). Just update the parts of the DOM that change. Since the virtual DOM is generated quickly each time and the DOM Diff algorithm can find the difference between two DOM trees quickly (time complexity O(n)), compared with the traditional DOM manipulation, the method using virtual DOM has obvious advantages in speed and performance.

Let’s take a simple example. Suppose we have a list like this:

       

    
        
1
    
        
2
    
        
3
    
        
4

       
Copy the code

Now I want to update it to:

       

    
        
6
    
        
7
    
        
8
    
        
9
    
        
10

       
Copy the code

Traditionally, we delete 1,2,3,4 and then append 6,7,8,9,10, which means there will be 4 deletions and 5 add-ons. React Diff the old and new DOM trees and finds that instead of deleting nodes 1, 2, 3, and 4, you can change the innerHTML of each node to 6,7,8,9 and append node 10. This is much faster than nine node DOM operations.

5. To summarize

This article is only a superficial understanding of React design. It is rather scattered. Of course, React has many advantages, which need to be learned and experienced slowly. Of course, everything has relativity, in the actual development process, or to choose the most suitable framework, rather than blindly follow the crowd.