First, a key version of React

Prior to React16, virtural Dom was updated and rendered simultaneously. When an update or load is started, the diff virtual DOM and the rendering process is completed in one go. If the component hierarchy is deep, the corresponding stack will be very deep, occupying the main thread of the browser for a long time, and some actions such as user input and mouse scrolling will not be answered.

Act16 starts with sharding to solve this problem. Divide a task into smaller pieces, and when the time allotted to that piece runs out, check to see if there is a new, higher-priority task on the list. If there is a new task, continue to do the original task. This method is called Async Rendering.

However, there is a serious problem with the current Fiber algorithm, that is, the task weight problem. If a high-weight task is always in progress, the low-weight task will not be able to execute, so if there are always high-weight tasks occupying the execution stack, the DOM will not render. If you are particularly interested in the underlying principles of React, you can read another article of the author, which is dedicated to introducing the underlying knowledge of React.

React16.8 updates hooks.

The characteristics of the React

React is fast. React uses a unique way of manipulating the DOM compared to other frameworks. It does not operate directly on the DOM. It introduces a concept called the virtual DOM, which is sandwiched between JavaScript logic and the actual DOM. This concept improves Web performance. During UI rendering, React implements partial updates to the actual DOM through micro-operations in the virtual DOM. By binding views to data in one direction, most operations can no longer manipulate the DOM directly, but instead update the view by changing the data, which makes great sense for the front end. 2. Cross-browser compatibility virtual DOM helps us solve the cross-browser problem by providing us with a standardized API that works even in IE8. 3. Modularity Write separate modular UI components for your program, and they can be imported into other components. This equates to more maintainable code. Flux is an architecture for creating a one-way data layer in JavaScript applications, which was conceptualized by Facebook with the development of the React View library. It is a concept, not a tool-specific implementation. It can be co-opted by other frameworks. For example, Alex Rattray has a good example of Flux that uses Backbone’s collection and model in React. 5. Pure JavaScript Modern Web applications work differently from traditional Web applications. For example, updates to the view layer require user interaction without requesting the server. So the view and the controller are very dependent on each other. Many frameworks use a template engine such as Handlebars or Mustache to handle the view layer. But React believes that views and controllers should be interdependent rather than using a third-party template engine, and most importantly, it’s a pure JavaScript program. 6. The biggest drawback of homogeneous JavaScript single-page JS applications is that they limit the indexing of search engines. React has a solution for this. React can be pre-rendered on the server and sent to the client. It can recover the same records from pre-rendered static content into a dynamic application. Because search engine crawlers rely on server-side responses rather than JavaScript execution, pre-rendering your application helps with search engine optimization. React is more compatible with other frameworks/libraries such as RequireJS for loading and packaging, while Browserify and Webpack are suitable for building large applications. They make difficult tasks less daunting. 8. Compared to other frameworks [Vue] is more flexible with less rules and regulations, providing a series of base apis that can be combined at will. React provides small blocks and Vue provides large blocks, if I had to compare it to bricks. This makes React much more flexible than Vue.

There are many other things about React, but the author will not write them all in one, which is very messy. Therefore, every following article will introduce a separate knowledge point about React. Like friends don’t forget to point a praise and then go oh ~ Wu Xiaodi thank you le!