Use of React: Five major features of the react framework

This article introduces you to the use of React: the five major characteristics of the react framework have certain reference value. Friends in need can refer to it.

01. The era background of React

Everything in the world has its cause and effect, and the emergence of a framework must be inseparable from a specific era background. For React, there are two main backgrounds that have to be mentioned:

1. A large amount of business logic has been changed from back-end implementation to front-end implementation: AJAX technology The emergence of the Internet has prompted people to pursue a smoother Web interactive experience, causing a large number of complex business logic to be implemented from back-end development to front-end development. This has caused a geometric increase in the amount of front-end code. Quantitative changes lead to qualitative changes. How to organize and manage this magnitude? front-end code? How to better improve application performance? Drawing on decades of experience in back-end development, the answer, not surprisingly, is to use a large front-end framework.

2. For SPA applications with complex logic, the performance of the original front-end framework is poor

   : Before the advent of React, there were already backbone.js and Angular.js and other mature large-scale front-end frameworks. However, Facebook engineers found that when faced with complex business scenarios (for example: frequent DOM operations), these frameworks cannot bring good page performance. , so they planned to develop a framework to solve this problem. The framework they developed was React, and the solution to this problem was: use Virtual DOM.

02. Virtual DOM

The idea of ​​virtual DOM is actually not difficult to understand: we know that frequent DOM operations will cause the browser to perform a large number of calculations on the DOM tree. This It is the most important performance bottleneck of the front end. Therefore, as long as we can merge multiple DOM operations, and then "perform all the efforts in one operation", and perform

one

operation on the DOM tree in a timely manner, we can greatly improve front-end performance. For React, the solution to realize this idea is to use

Virtual DOM

. What we call a DOM tree is actually a JavaScript object nested in a tree structure. In the browser, changes to the DOM tree will cause the browser to perform a series of calculations. Therefore, based on the existing DOM tree structure, we can clone an identical DOM tree, that is, a "virtual DOM", and all changes will be included in the browser. It is implemented on this virtual DOM and then merged into the DOM tree in the browser to solve the performance bottleneck mentioned before. Although it is not difficult to understand, this process actually involves many complex situations and some algorithmic difficulties, which is enough to open a new article to explain. I will stop here and stop here. Table.

03. What is componentization?

Componentization is a code design pattern that means you can build some simple functions into a more complex function for use.

Componentization has two notable features:

Encapsulation: the data required by a component is encapsulated inside the component;
Composition: A component can be combined with other components to implement more complex business logic;
The best thing about React is that all UI elements in React are components , and the component is just a JavaScript function. But compared to the traditional function that receives some parameters and returns a value, the React function will receive some parameters and return UI elements in the interface.

Just as a good function should comply with the "DOT" (Do One Thing) principle, a good React component cannot mix the business logic of other components. We should try to keep React components simple so that complex ones can The internal logic of React components becomes clear.

The following formula can well express the componentization idea of ​​"view is the rendering of data" in React:

UI = render(data)

In this way, in React, the way to form a complex view It becomes very simple:

Combining components

;04. Declarative code

Declarative code refers to: allowing developers to follow "what I want to do", Rather than "what do I want the computer to do", think about how to achieve business needs.

Let us briefly compare the difference between "declarative code" and "imperative code":

Imperative code:
• Feeling that the weather is too hot, Writing code:

  1. 拿起空调遥控器；
  2. 打开空调；
  3. 设置温度为 27 摄氏度；

  
  
Declarative code:
• Feeling that the weather is too hot, writing code:

  1. 调用“开空调(27)”函数；

  
  
Looks like, declarative The code is just

calling the encapsulated imperative code

, but in essence, this is a better programming thinking, which allows us to no longer just focus on how to implement functions through code , but more thinkingIn order to realize business logic, what functions (functions) are needed by the code, thinking about the design of functions and the relationship between functions make our code logic clearer , rich in order.

05. One-way data flow

In React, the data is organized in a tree shape, flowing in one direction from top to bottom (corresponding to the DOM tree). The reason for this design is: The clearer the data flow, the more controllable the status of the component;

For single-page applications with complex business logic, the front-end accepts a large amount of data, and the relationship between the data is also It is complicated, and React adopts component development. Different UIs change according to different data. Without a clear and reasonable data flow management method, the final code can only be a mess. Once there is an error in the UI or data, it will be difficult to troubleshoot the error. Where is the source?

In view of this, React uses a "one-way data flow" approach that only allows data to flow from parent elements to child elements.

The mechanism of React's one-way data flow is roughly as follows: data is stored on the parent component and flows downward to the child component. Although the data is stored on the parent component, both parent and child components can use this data. However, if the data needs to be updated, then only the parent component should be updated. If the child component needs to modify the data, it can only send updated data to the parent component, where the data is actually updated. Once the data is updated by the parent component, the child component will receive the new data.

One-way data flow sounds like it adds extra work, but it makes it easier for developers to figure out how the application works.

06. Pure JavaScript syntax

We can easily ignore this feature of React, that is, in React, there is no special proprietary React syntax that needs to be understood and remembered, all Components, data operations, and business logic are all implemented using JavaScript syntax.

This means that if you want to use React, you only need to understand the ideas of React and a few key APIs, and you can immediately start using React to develop complex applications. And React also encourages you to use functional programming ideas for development. You can use any of your functional programming skills in React development.

07. Summary

In this article we first talked about the background of the React framework, and then explained the five major characteristics of React:

1. Virtual DOM;

2. Componentization;

3. Declarative code;

4. One-way data flow;

5. Pure JavaScript syntax;

Related recommendations:

About the analysis of the event loop in Node

Introduction to responsive React Native Echarts components

The above is the detailed content of Use of React: Five major features of the react framework. For more information, please follow other related articles on the PHP Chinese website!