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

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

. 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:

;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 摄氏度；

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

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

  Copy after login
  
  
Looks like, declarative The code is just

, 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

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!