Explain the three front-end technologies of react angular Vue in detail

Time:2021-9-5
catalogue
  • 1、 [react]
    • Basic Usage
    • Salient features
    • Class component
    • Virtual DOM
    • Life cycle approach
    • JSX
    • JavaScript expression
    • Beyond HTML architecture
    • React Hooks
    • Hooks rule
    • Common terms
    • Use of flux architecture
    • history
    • Common commands
  • 2、 [angular]
    • The difference between angular and angularjs
    • history
    • Componentization
    • data management
    • Common commands
  • 3、 [Vue]
    • summary
    • history
    • Componentization
    • Template
    • Reactive system
    • Transformation effect
    • route
    • ecosystem
    • Official tools
    • Official library
    • Common commands
  • 4、 [summary]

    1、 [react]

    React (also known as react. JS or reactjs) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

    React can be used as the basis for developing single page or mobile applications. However, react only focuses on rendering data to DOM, so creating react applications usually requires additional libraries for state management and routing. Redux and react router are examples of such libraries respectively.

    Basic Usage

    The following is a simple example of how react uses JSX and JavaScript in HTML.

    The greeter function is a react component that accepts a property greeting. The variable app is an instance of the greeter component, where the greeting property is set to “Hello world!”. Then, the reactdom. Render method renders our greeter component in a DOM element (ID myreactapp).

    When displayed in a web browser, the result will be:

    Salient features

    Componentization

    The react code consists of entities called components. Components can render to a specific element in the DOM using the react DOM library. When rendering a component, you can pass in a value called props.

    The two main ways to declare components in react are through function components and class based components.

    Function component

    Functional components are declared with a function to return some JSX.

    Class component

    Class based components are declared using ES6 classes. They are also called “stateful” components because their state can be maintained throughout the component and passed to child components through props.

    Virtual DOM

    Another notable feature is that react uses a virtual document object model, that is, virtual dom. React creates a data structure cache in memory, calculates the change difference, and only renders the actually changed sub components, so as to efficiently update the DOM displayed by the browser.

    Life cycle approach

    The lifecycle method refers to the hooks processing function that allows the code to be executed at a set point in the life cycle of the component.

    • Shouldcomponentupdate allows developers to prevent unnecessary re rendering of components by returning false without rendering.
    • ComponentDidMount is called after the component is mounted (component has been created in the user interface, usually by associates it with the DOM node). This is typically used to trigger data loading from a remote data source via the API.
    • Componentwillunmount is called immediately before the component is disassembled or “uncoupled”. This is usually used to clear the resource dependencies of components, which will not be simply removed with the unloading of components (for example, remove any setinterval () instance related to components, or “EventListener” set on the “document” due to the existence of components).
    • Render is the most important lifecycle method and the only method that must exist in any component. It is usually called every time the state of a component is updated.

    JSX

    JSX, namely JavaScript XML, is an extension of JavaScript language syntax. JSX is similar to HTML in appearance. It provides a method for rendering syntactic structured components familiar to developers. React components are usually written in JSX, although it is not necessary to use JSX (components can also be written in pure JavaScript). JSX is similar to another extended syntax called XHP created by Facebook for PHP.

    An example of JSX Code:

    Nesting Elements

    Multiple elements at the same level need to be wrapped in a container element, such as the < div > element in the above figure.

    attribute

    JSX provides a series of element attributes designed to correspond to the attributes provided by HTML. These custom attributes can also be passed to the component, and all attributes will be received by the component as props.

    JavaScript expression

    JavaScript expressions (but not statements) can be used inside JSX through braces {}.

    The display result of the above code is:

    Conditional statement

    If else statements cannot be used in JSX, but conditional expressions can be used instead. The following example will {I = = = 1? ‘when I is 1 True ‘:’ false ‘} renders as string’ true ‘.

    The result would be:

    Functions and JSX can be used in conditional expressions:

    The result would be:

    The code written in JSX needs to be transformed by Babel and other tools before it can be understood by the web browser. This processing is generally carried out in the process of software construction, and then the built application is deployed.

    Beyond HTML architecture

    The basic architecture of react is not only suitable for rendering HTML in browsers. For example, Facebook has dynamic charts that can be rendered to < canvas > tags, while Netflix and paypal use common loading to render the same HTML on the server and client.

    React Hooks

    Hooks is a function that allows developers to “hook in” react state and lifecycle features from function components. They make the code more readable and easier to understand. Hooks does not work in class components. Its ultimate goal is to eliminate the existence of class components in react.

    React provides some built-in hooks, such as usestate, usecontext, usereducer and useeffect. They are described in the hooks API reference book. Usestate and useeffect are the most used, which control state and detect state changes in the react component respectively.

    Hooks rule

    Hooks also has some rules that must be followed before using hooks:

    • Hooks can only be called at the top level (not in loops or in if statements).
    • Hooks can only be invoked in React function components and cannot be invoked in common functions or class components. Customize hooks

    Building your own hooks, the so-called custom hooks, allows you to extract component logic into reusable functions. A custom hook is a JavaScript function whose name starts with “use”, which can call other hooks. The rules of hooks also apply to them.

    Common terms

    React does not attempt to provide a complete “application library”. It is specifically designed to build user interfaces, so it does not include the tools that many developers think they need to build applications. This allows developers to select any library to complete tasks such as performing network access or local data storage. This situation also determines that the standards of react technology cannot be unified when creating web applications.

    Use of flux architecture

    In order to support the concept of one-way data flow of react (in contrast to the two-way data flow of angularjs / angular), flux architecture is a representative alternative to the popular model view controller (MVC) architecture. The feature of flux is that data actions are sent to a storage warehouse through the central scheduler, and changes to the storage warehouse data will be transmitted back to the view. When used with react, this transfer is done through component properties.

    Flux can be considered a variant of the observer model.

    The react component under the flux architecture should not directly modify any props passed to it, but should pass callback functions, which can create data actions sent by the scheduler to modify the storage warehouse. A data action is an object whose responsibility is to describe what has happened: for example, a data action describes a user “following” another user. It may contain the following data:

    User ID,

    Target user ID,

    And user_ FOLLOWED_ ANOTHER_ User enumeration type.

    Storage warehouse is a data model that can change itself according to the data actions received from the scheduler.

    This pattern is sometimes expressed as “attributes flow downward and data actions flow upward”. Since the birth of flux, many implementations of flux have been created, the most famous of which is redux. It is characterized by a single storage warehouse, which is usually called a single data source.

    history

    React was created by Jordan walke, a software engineer at Facebook. Inspired by XHP, an HTML component library for PHP, it released an early prototype of react called “faxjs”,. It was first deployed on Facebook’s news feed in 2011 and later on instagram in 2012. Open source at JSCONF conference in the United States in May 2013.

    React native was announced on Facebook’s react conf in February 2015. In March 2015, open source react native realized the development of native Android, IOS and uwp.

    On April 18, 2017, Facebook announced react fiber, a new core algorithm of react library, which is used to build user interface. React fiber will become the basis for any future improvement and function development of react library.

    On September 26, 2017, react 16.0 was officially released.

    On February 16, 2019, react 16.8 was officially released, which introduced react hooks.

    Common commands

    Create project:

    npx create-react-app my-app

    Development environment operation:

    npm start

    Production environment packaging:

    npm run build

    [official website]

    http://reactjs.org/

    [latest version]

    16.13.1 on March 19, 2020

    [authorization]

    MIT License

    2、 [angular]

    Angular (commonly known as “angular 2 +” or “angular V2 and above”) is an open-source Web application framework based on typescript, led by Google’s angular team and a community composed of individuals and enterprises. Angular was rewritten from scratch by the same team that built angularjs.

    The difference between angular and angularjs

    • Angular has no concept of “scope” or controller. Instead, it uses the hierarchy of components as its main architectural feature.
    • Angular has different expression syntax. The key point is that “[]” is used for attribute binding and “()” is used for event binding
    • Modularity – many core functions have been transferred to modules
    • Angular recommends using Microsoft’s typescript language, which introduces the following features.

    (1) Static typing, including generics

    (2) Annotation

    • Typescript is a superset of ECMAScript 6 (ES6), which is backward compatible with ECMAScript 5 (i.e. JavaScript).
    • Dynamic loading
    • Asynchronous template compilation
    • Iterative callback provided by rxjs. Rxjs limits state visibility and debugging, but these problems can be solved by reactive add ons such as ngreact or ngrx.
    • Support angular universal, and you can run angular applications on the server.

    history

    name

    Initially, the rewriting of angularjs was called “angular 2”, but this led to confusion among developers. To clarify, the team announced that each framework uses different terms, where “angular JS” refers to version 1. X and “angular” refers to version 2 and above.

    Version 2

    Angular 2.0 was announced at the ng Europe Conference on October 22-23, 2014. The drastic changes in version 2.0 have caused considerable controversy among developers.

    On April 30, 2015, angular developers announced that angular 2 was converted from alpha to developer preview version, and in December 2015, angular 2 was converted to beta version. The first release candidate version was released in May 2016, and the final version was released on September 14, 2016.

    Version 4

    On December 13, 2016, angular 4 was released, skipping 3 to avoid confusion caused by the version dislocation of the router package. At that time, the released version was v3.3.0. The final version was released on March 23, 2017, and angular 4 is backward compatible with angular 2.

    Angular version 4.3 is a small version, which is an alternative to version 4. X.x.

    The function of version 4.3 introduces httpclient, a smaller, easier to use and more powerful HTTP request library. New router life cycle events are provided for guardians and parsers. Four new events. Guardscheckstart, guardscheckend, resolvestart and resolveend are added to the existing life cycle event sets such as navigationstart. Conditionally disable animation. Version 5

    Angular 5 was released on November 1, 2017. The main improvements of angular 5 include supporting progressive web applications, building optimizers and improvements related to material design.

    Version 6

    Angular 6 was released on May 4, 2018. This version focuses not on the underlying framework, but more on the tool chain, and makes it easier for angular to update and upgrade in the future, such as ngupdate, ng add, angular element, angular material + CDK component, angular material entry component, CLI workspace, library support, tree shaking provider, animation performance improvement, rxjs V6.

    Version 7

    Angular 7 was released on October 18, 2018. The updated content involves application performance, angular material & CDK, virtual scrolling, accessibility improvement of selections, content projection that now supports custom elements using web standards, and dependency updates on typescript 3.1, rxjs 6.3 and node 10 (still supports node 8).

    Version 8

    Angular 8 was released on May 28, 2019. Differential loading of all application codes, dynamic import of inert routes, web workers, typescript 3.4 support, and angular Ivy can be configured as a preview. Angular

    Ivy preview includes:

    • The generated code is easier to read and debug at run time.
    • Faster rebuild time
    • Reduce payload
    • Improved template type checking
    • Backward compatibility

    Version 9

    Angular 9 was released on February 6, 2020. Version 9 uses the Ivy compiler by default. Angular is compatible with typescript 3.6 and 3.7. In addition to hundreds of bug fixes, the Ivy compiler and runtime offer many advantages:

    • Smaller packages
    • Faster testing
    • Better debugging
    • Improved CSS class and style binding
    • Improved type check
    • Improved build errors
    • The build time is improved, and the AOT function is enabled by default
    • Improve internationalization function

    Componentization

    A component example

    HTML part

    Typescript section

    route

    data management

    Define service classes

    Call service class

    Common commands

    From the terminal, install the angular cli globally:

    npm install -g @angular/cli

    Use the ng new command to create a new angular cli workspace:

    ng new my-project-name

    Development environment operation:

    ng serve

    Production environment packaging:

    ng build –prod

    [official website]

    https://angular.io/

    [latest version]

    9.1.2 on April 15, 2020

    [authorization]

    MIT License

    3、 [Vue]

    Vue.js (commonly referred to as Vue; Pronounced / vju ː/, Similar to “view”) is an open source model view ViewModel JavaScript framework for building user interfaces and single page applications. It was created by Evan you and maintained by him and core members from many companies such as netlify and netguru.

    summary

    Vue.js features a progressive architecture that focuses on declarative rendering and component composition. Advanced functions required by complex applications, such as routing, state management and construction tools, are provided through officially maintained support libraries and packages, of which nuxt.js is one of the most popular solutions.

    Vue.js allows you to extend HTML with HTML attributes called directives.

    history

    Vue was created by Evan you. While working at Google, he participated in the development of several projects using angularjs technology, and then created Vue. He later summarized his thinking process“ I thought, what if I could extract the really good parts of angularjs and build some lightweight things“ The first version of the source code of the project was submitted in July 2013, and Vue was first released in February 2014.

    Componentization

    Vue components extend basic HTML elements to encapsulate reusable code. From a high-level perspective, components are custom elements of the additional behavior of the Vue compiler. In Vue, a component is essentially a Vue instance with preset options. The following code snippet contains an example of a Vue component. The component displays a button and prints the number of times the button is clicked.

    Template

    Vue uses HTML based template syntax that allows the rendered DOM to be bound to the underlying data of Vue instances. All Vue templates are valid HTML and can be parsed by compliant browsers and HTML parsers. Vue compiles the template into a virtual DOM rendering function. The virtual document object model (or “DOM”) allows Vue to render components in its memory before updating the browser. Combined with the reactive system, Vue can calculate the minimum number of components that need to be re rendered, and start the minimum DOM operation when the app state changes.

    Vue users can use template syntax or choose to write rendering functions directly using JSX, which allows applications to be built from software components.

    Reactive system

    Vue features a reactive system that uses pure JavaScript objects and optimized re rendering. Each component will track its reactive dependencies during rendering, so the system can accurately know when to re render and which components need to be re rendered.

    Transformation effect

    Vue provides several ways to deploy transformation effects when inserting, updating, or deleting items from the dom. This includes the following tools:

    • Classes that automatically apply CSS transformations and animations
    • Integrate third-party CSS animation libraries, such as animate.css.
    • During the transformation of hooks, JavaScript is used to directly manipulate the dom.
    • Integrate third-party JavaScript animation libraries, such as velocity.js.

    When an element in a transformation component is inserted or removed, this occurs:

    • Vue automatically detects whether CSS transformations or animations have been applied to the target element. If so, CSS transformation classes will be added / deleted at the appropriate time.
    • If the transformation component provides JavaScript hooks, these hooks will be called at the appropriate time.
    • If no CSS transformation / animation is detected and JavaScript hooks are not provided, the DOM operations of insertion and / or removal will be performed immediately in the next frame.

    route

    A traditional disadvantage of single page applications (Spas) is the inability to share links to the exact “child” pages in a particular web page. Since spa only provides users with a URL based server response (it usually serves index.html or index.vue), it is usually difficult or even impossible to use some screens as bookmarks or links to specific parts. To solve this problem, many client routers use “hashbang” (#!) To partition dynamic URLs, for example http://page.com/# !/。 However, in HTML5, most modern browsers support routing without Hashang.

    Vue provides an interface to change the content displayed on the page according to the current URL path – there can be many ways (whether through e-mail link, refresh or in page link). In addition, when some browser events (such as clicking) occur on buttons or links, the front-end router can consciously convert the browser path. Vue does not have its own front-end routing. However, the open source “Vue router” package provides an API to update the URL of the application, supports the return button (navigation history), and supports the authentication URL parameters of e-mail password reset or e-mail verification link. It supports mapping nested routes to nested components and provides refined transition control. After adding Vue router, components only need to map to the route to which they belong, and the parent / root route must indicate the rendering location of the child route.

    Code above:

    • stay http://websitename.com/user/ Set a front-end path in < ID >.
    • This will be rendered in the user component defined in (const user…).
    • Allows the user component to enter the user’s specific ID: $route.params.id using the params key of the $route object.
    • This template (depending on the parameters passed to the router) will be rendered to < router View > < / router View > in the DOM’s div#app.
    • The resulting HTML will be: http://websitename.com/user/1 :

    ecosystem

    The tools and libraries that come with the core library are developed by the core team and contributors.

    Official tools

    • Devtools – browser devtools extension for debugging vue.js applications.
    • Vue cli – standard tool book for rapid development of vue.js
    • Vue loader – a webpack loader that allows Vue components to be written in the format of single file components (SFCS).

    Official library

    • Vue router – the official router of vue.js
    • Vuex – centralized state management of vue.js based on flux mode.
    • Vue server renderer – server side rendering for vue.js.

    Common commands

    Installation tools

    npm install -g @vue/cli

    Create project:

    vue create my-project

    Development environment operation:

    npm run serve

    Production environment packaging:

    npm run build

    [official website]

    https://vuejs.org/

    [latest version]

    2.6.1 on December 13, 2019

    [authorization]

    MIT License

    4、 [summary]

    This paper makes a detailed exploration on the current top front-end technology. A major direction of front-end technology is single page application (SPA). When selecting the front-end technology for this business, we need to consider the following aspects:

    1. The current skills of members is a very practical problem. Most programmers will choose the technology they are familiar with. Here we need to think about whether the technology we are familiar with is the best option?

    2. Available learning time. If it is found that the technology to be used needs some time to learn, will the cost of this time conflict with the development progress?

    3. Whether the complexity of the project can be minimized is a key factor. The reason why advanced technology is advanced is that it allows developers to focus their time and energy on real business development. If the technology to be used needs many configurations that are not related to business, you need to ask a question. Is there a better way?

    The above is a detailed explanation of the three front-end technologies of react angular Vue. For more information about the three front-end technologies of react angular Vue, please pay attention to other relevant articles of developeppaer!

    Recommended Today

    Swift advanced 08: closure & capture principle

    closure closurecanCapture and storageOf any constants and variables defined in their contextquote, this is the so-calledClose and wrap those constants and variablesTherefore, it is called“closure”Swift can handle everything for youCaptured memory managementOperation of. Three forms of closure [global function is a special closure]: a global function is a closure that has a name but does […]