instructions

The information involved in the article comes from the Internet, meaning is the summary of personal learning and experience, if there is any infringement, please contact me to delete, thank you!

concept

React is a JavaScript library for building user interfaces

The history of the React

React was born when jQuery, AngularJS, and backbone. js became popular. JQuery was born in 2005, and browser compatibility was the biggest issue. To solve this problem, jQuery encapsulates DOM manipulation, provides style selectors, and encapsulates AJAX, chained manipulation, and many other basic functions. But from today’s point of view, jQuery doesn’t solve the problem of how code is organized, it’s not even a framework, it’s essentially a collection of utility functions.

In 2009, AngularJS burst onto the front end with its advanced Java development experience. It not only introduces the idea of MVC, but also imposes concepts like Controller, $scope, service, etc. Like Spring Boot, AngularJS provides a whole-family bucket solution that deeply encapsulates from the bottom up, providing framework features like routing, bidirectional binding, directives, components, and more.

Backbone.js is a good choice for 2010 if you want your code to be organized without getting bog – ered in the endless concepts of Angular.js. It doesn’t bring as many concepts as AngularJS, and it takes two things into account:

  • Affinity with previous generations, as long as you know jQuery, you can continue to happily write front-end code without needing to learn another language
  • It considers the organization of code, introduces the basic MVC concept, and provides the encapsulation of collection and front-end routing, which complements the disorder of jQuery.

So backbone. js is very friendly and even popular for beginners. The main reason to choose backbone. js is that it keeps the cost of front-end engineering low enough. This “low” doesn’t just mean low learning costs for developers, it also means low transformation costs, because there are so many existing jQuery projects that can be migrated.

But two problems remain:

  • Different from the back end, the front end is mainly based on UI components, which requires a reusable development scheme. In the past, the common reuse scheme is the assembly template
  • As front-end engineering becomes more and more complex, components as basic units should be able to maintain stability by writing unit tests.

Newcomers to React will notice that the mindset for developing React is completely different and the concept is extremely simple. If I could express it in a very neat formula, it would be:

View = fn(props)
Copy the code

Secondly, FN can also be composed of countless components. React only has components, no pages, no controllers, and no models. No pages? Make a page out of components, no controller, use components as controllers. It’s like building legos.

React has more variables than React, which can be expressed by taking state and context into account:

View = fn(props, state, context)
Copy the code

In terms of actual code, FN may be a class component, or it may be a purely functional component, or it may have side effects in functions that affect UI generation, such as direct manipulation of DOM or binding events. The classical formula always shows the ideal case, as E= MC ² simplifies a lot of external distractions, but that doesn’t stop it from expressing the conclusion that there are only two things to care about in React: data and components.

So why locate the base unit in a component? If you remember design patterns, do you remember the iron law that composition is better than inheritance? That is, composite components are always the best solution when building UI views.

React solves the problem of view layer reuse through componentization, and is essentially a componentized framework.

use

To summarize, build views — React virtual DOM is much more applicable to scenarios than traditional frameworks:

  • First of all, both PC web pages and mobile web pages are fully supported
  • React Native can also be used to develop iOS and Android apps
  • React 360 also allows VR apps
  • React can also be used to develop command-line applications

The core idea

React’s core ideas are declarative, componentized, and universal (officially: Learn once, Write Anywhere).

declarative

The advantage of declarative programming is that it is intuitive, intuitive and easy to combine. When you design concise views for each state of your application, React effectively updates and renders components correctly when data changes.

Writing your UI declaratively makes your code more reliable and easy to debug.

For imperative programming, it would look like this:

// HTML
<div class="block"></div>
// JS
const block = $('.block');
block.css('color', 'red');
Copy the code

React would write like this:

const Block = (props) => <div style={{ color: 'red' }}></div>
Copy the code

componentization

Componentization can reduce the coupling of functions between systems and improve the integration of functions. It is of great benefit to front-end engineering and code reuse. The biggest difference with React componentalization is that instead of writing with templates, it uses declarative JSX.

Create components that have their own state, and from those components make up a more complex UI

Component logic is written in JavaScript rather than templates, so you can easily pass data around your application and keep state separate from DOM.

generality

No matter what technology stack you’re currently using, you can always introduce React to develop new features without having to rewrite existing code.

React can also use Node for server rendering or React Native for mobile application development.

React uses the virtual DOM. To keep things simple, this is a common JavaScript object that contains attributes tag, props, and children. Specific can see: zhuanlan.zhihu.com/p/75533792

React abstracts the DOM into a virtual DOM, so developers don’t manipulate the DOM directly. Because of this layer of encapsulation, React is no longer limited to Web development, but can be expanded to a wider platform and a more prosperous ecosystem. React can run Native, VR, or Shell commands as long as they are compatible with the virtual DOM layer.

The advantages and disadvantages

advantages

Advantages:

  1. declarative
  2. componentization
  3. generality

disadvantages

Because React isn’t a blanket framework for features like routing, the React team prefers to leave it to the community. Therefore, there are relatively high costs in technology selection and learning and use. But because communities are thriving, unofficial package solutions exist, such as DvaJS and React-Coat, to fill the niche. React is also a framework with a wide gap between the upper and lower limits of users.

The resources

Kaiwu.lagou.com/course/cour…