When did the react framework come out?

The react framework came out in 2013; React originated from Facebook’s internal project and was open sourced in May 2013. React is a JavaScript library used to build user interfaces, mainly used to build UI; users can pass various types of parameters in React, such as declaration codes to help you render the UI, static HTML DOM elements, or Pass dynamic variables and even interactive application components.

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

1. The origin and development of React

React is a JavaScript library used to build user interfaces. It originated from Facebook’s internal project because The company was dissatisfied with all the JavaScript MVC frameworks on the market, so it decided to write its own to build the Instagram website. After making it, I found that this set of things is very useful, so it was open sourced in May 2013.

2. The starting point of React

HTML-based front-end interface development is becoming more and more complex, and its essential problems can basically be summarized It focuses on how to efficiently reflect dynamic data from the server or user input to complex user interfaces. The React framework from Fackbook is a solution completely oriented to this problem. According to the official website description, its starting point is: used to develop large applications with data that changes over time (Building large applications with data that changes over time). Compared with traditional front-end development, React has opened up a quite alternative approach to achieve high-performance and efficient development of front-end interfaces.

React is mainly used to build UI. You can pass various types of parameters in React, such as declaration codes to help you render UI, static HTML DOM elements, dynamic variables, and even interactive application components.

3. The relationship between Recat and traditional MVC

Lightweight view layer library! A JavaScript library for building user interfaces

React is not a complete MVC framework. It can be considered as the (view) layer in MVC at most. Even React does not fully recognize the MVC development model; React is a library for building page UI. It can be simply understood that React divides the interface into independent small blocks. Each block is a component. These components can be combined and nested to become our page

4. Reflection of React’s high performance: Virtual DOM

Principle: During our development process, we need to reflect unpredictable data to the UI in real time. At this time, The DOM needs to be manipulated. However, frequent or complex manipulation of the DOM will cause many performance problems. ——How to perform high-performance complex DOM operations is usually an important indicator of a front-end developer’s skills.

React introduces the virtual DOM (virtual DOM) mechanism for this: a set of DOM API is implemented on the browser side using javascript. When developing based on React, all DOM construction is performed through virtual DOM. Whenever the data changes, React will re-render the entire DOM tree. Then React compares the current entire DOM tree with the previous DOM tree to obtain the DOM structure. difference, then only the parts that need to be changed do the actual browser DOM update. Moreover, React can process the refresh of the virtual DOM in batches. Two data changes in an event loop are merged. For example, if you continuously change the node content from A-B, B-A, React will think that A becomes B, and then again. There is no change in the UI from B to A, and if controlled manually, this logic is usually extremely complex

React Fiber:

Released after React16 A react core algorithm, React Fiber is a re-implementation of the core algorithm (official website statement). The diff algorithm was used before

In the previous React, the update process was synchronous, which may cause performance problems.

When React decides to load or update the component tree, it will do a lot of things, such as calling the life cycle function of each component, calculating and comparing the Virtual DOM, and finally updating the DOM tree. This entire process is performed simultaneously. , that is to say, as long as a loading or update process starts, it will not be interrupted in the middle. Because of the single-threaded nature of JavaScript, if the component tree is very large and each synchronization task takes too long, lags will occur.

React Fiber’s method is actually very simple – sharding. Divide a long task into many small pieces. The operation time of each small piece is very short. Although the total time is still very long, after each small piece is executed, other tasks are given a chance to execute, so that the only thread will not will be exclusive, and other tasks will still have the opportunity to run.

5. Features and advantages of React

1. Virtual DOM

We operated before The DOM method is through document.getElementById(). This process is actually to first read the dom structure of the html, convert the structure into variables, and then perform operations

Reactjs defines a set of dom models in the form of variables. All operations and conversions are directly in the variables. This reduces the need to operate the real dom, and the performance is really high. What is the essential difference from the mainstream MVC framework, and is not the same as dom Dealing

2. Component system

The core idea of ​​react is that any area or element on the page can be regarded as a component

So what are components?

Component refers to an aggregate that contains html, css, js, and image elements at the same time

3. One-way data flow

In fact, reactjs The core content is data binding. The so-called data binding means that as long as some server-side data is bound to the front-end page, the developer only needs to focus on realizing the business.

4. JSX syntax

In vue, we use the render function to build the dom structure of the component with higher performance, because the process of finding and compiling the template is omitted, but the code is readable when using createElement to create the structure in render. The performance is low and the load is relatively high. At this time, you can use JSX syntax to create dom in render, which solves this problem, but the premise is that you need to use tools to compile jsx

[Related recommendations: Redis Video Tutorial、Programming video】

The above is the detailed content of When did the react framework come out?. For more information, please follow other related articles on the PHP Chinese website!