Shulou(Shulou.com)05/31 Report--

This article mainly introduces the Javascript framework Vue and React case comparative analysis of the relevant knowledge, the content is detailed and easy to understand, easy to operate, with a certain reference value, I believe you will have something to gain after reading this Javascript framework Vue and React example comparative analysis article, let's take a look at it.

A brief introduction

Unless you haven't been paying attention to the development of the front end recently, you must have heard of the JavaScript UI framework created by Facebook-React. It supports most Facebook sites, including Instagram. Unlike the popular frameworks such as jQuery, Backbone.js and Angular 1 at that time, the birth of React changed the world of JavaScript. The change in * is that React popularized Virtual DOM (we'll explore later) and created a new syntax-JSX,JSX allows developers to write HTML in JavaScript. WAT?

Vue tries to solve the same problems as React, but provides another set of solutions. Vue uses a templating system instead of JSX, making it easier to upgrade existing applications. This is because the template uses ordinary HTML, it is relatively easy to integrate the existing system through Vue, and there is no need for overall refactoring. At the same time, Vue claims that it is easier to learn, and I have only recently come into contact with Vue to prove that it is true. Another thing to say about Vue is that Vue is mainly maintained by a developer, not by a large company like Facebook like React.

similarity

There are many similarities between React and Vue, for example, they are both JavaScript's UI framework, focusing on creating front-end rich applications. Unlike the early JavaScript framework, Reat and Vue have only the skeleton of the framework, and other functions such as routing and state management are separate components of the framework.

Virtual DOM

AHA, what do people often say Virtual DOM is?

One of the similarities between Vue.js (version 2.0) and React is that they both use something called 'Virtual DOM'. The so-called Virtual DOM basically means its name: the virtual representation of a virtual DOM,DOM tree. It is based on the idea that changing the real DOM state is far more expensive than changing a JavaScript object.

Virtual DOM is a JavaScript object that maps the real DOM. If you need to change the state of any element, you should first change it on the Virtual DOM, rather than directly changing the real DOM. When a change occurs, a new Virtual DOM object is created and the difference between the old and new Virtual DOM is calculated. These differences will then be applied to the real DOM.

As an example, we can see how the code for the following list is written in HTML:

Item 1 item 2

In JavaScript, we can simply create a mapping for the above example with an object:

{type: 'ul', props: {' class': 'list'}, children: [{type:' li', props: {}, children: ['item 1']}, {type:' li', props: {}, children: ['item 2']}]}

The real Virtual DOM would be more complex than the example above, but it is essentially a native object nested with arrays.

When a new term is added to the JavaScript object, a function calculates the difference between the old and new Virtual DOM and reflects it on the real DOM. Algorithms for computing differences are the secret of a high-performance framework, and React and Vue are a little different in implementation.

Vue claims to be able to calculate Virtual DOM differences faster because it tracks the dependencies of each component during rendering, eliminating the need to re-render the entire component tree.

For React, all subcomponents are re-rendered whenever the state of the application is changed. Of course, this can be controlled through the shouldComponentUpdate lifecycle approach, but Vue sees this as the default optimization.

Summary: if you have complex interactions in your application and need to deal with a large number of UI changes, then using Virtual DOM is a good idea. If you update elements infrequently, Virtual DOM is not necessarily applicable, and performance is probably not as good as manipulating DOM directly.

Componentization

Both React and Vue encourage component-based applications. In essence, it is recommended that you split your application into functional modules, each of which can be connected to each other in an appropriate way. Examples of componentization can be found in the middle of this article:

You can think of a component as a small piece of the user interface. If I were to design the UI interface for Facebook, the chat window would be a component, the comments would be another, and the constantly updated friend list would be a component.

In Vue, if you follow certain rules, you can use single file components.

/ / PastaItem.vue

{{this.item.name}}

{{this.item.desc}}

Add to order {{this.orders}} export default {name: 'pasta-item', props: [' item'], data: function () {return {orders: 0}}, methods: {addToOrderNew: function (y) {this.orders + = 1 This.$emit ('order');}

As you can see in the example above, HTML, JavaScript and CSS are all written in one file. You no longer need to introduce CSS into the .vue component file, although this is possible.

React is also very similar, where JavaScript and JSX are written to the same component file.

Import React from "react"; class PastaItem extends React.Component {render () {const {details, index} = this.props; return (

{details.name}

{details.desc}

This.props.addToOrder (index)} className= "btn btn-primary" > Add to order {this.props.orders | | 0});}} export default PastaItem

Props

In the above two examples, we can see that both React and Vue have the concept of 'props', which is short for properties. Props is a special property in the component that allows the parent component to transfer data to the child component.

Object.keys (this.state.pastadishes) .map (key = >)

In the above JSX library group, index, key, details, orders and addToOrder are all props, and the data will be downloaded to the subcomponent PastaItem.

In React, this is necessary, which relies on a "single data source" as its "state" (more on this later).

In Vue, props is slightly different. They are also defined in the component, but Vue depends on the template syntax, and you can display the incoming data more efficiently through the template's loop function.

This is the implementation of the template, but the code works perfectly, but it is a bit more troublesome to present the same data in React.

Build tool

Both React and Vue have their own build tools that you can use to quickly build a development environment. React can use Create React App (CRA), while Vue corresponds to vue-cli. Both tools allow you to get a project template set up according to the practice.

Because CRA has a lot of options, it can be a little more troublesome to use. This tool will force you to use Webpack and Babel. Vue-cli, on the other hand, has a list of templates to choose from, which can create different templates as needed, making it more flexible to use.

In fact, both tools are very easy to use and can create a good environment for you. And if you don't have to configure Webpack, Jeff and I think that's a great thing.

Chrome development tools

Both React and Vue have good Chrome extension tools to help you find bug. They will check your application and let you see the changes in Vue or React. You can also see the status in the application and see updates in real time.

Matching framework

One of the similarities but slight differences between Vue and React*** is the way in which their supporting frameworks are handled. What is common is that both frameworks focus on the UI layer, and other functions such as routing and state management are handled by the peer framework.

The difference lies in how they relate to their respective supporting frameworks. Vue's core team maintains vue-router and vuex, both of which exist as official recommendations. React's react-router and react-redux are maintained by community members, neither of which is officially maintained.

Main differences

Vue and react have many similarities, but they also have complete inconsistencies.

Template vs JSX

The difference between React and Vue*** is the writing of templates. Vue encourages you to write templates that are similar to regular HTML. It is very similar to the standard HTML element in writing, but with a few more attributes.

{{item.msg}}

These attributes can also be used in a single-file component, although it requires the component to be converted to legitimate JavaScript and HTML at build time.

Vue encourages you to use HTML templates to render and use Angular-style methods to output dynamic content. Therefore, by integrating the original template into a new Vue template, Vue can easily provide upgrades to old applications. It also makes it easy for newcomers to adapt to its grammar.

On the other hand, React recommends that all your templates use the syntax extension of JavaScript-JSX writing. An example of the same code written in JSX is as follows:

{Object.keys (this.state.pastadishes) .map (key = >)}

At first glance, React/JSX feels very verbose, but developing using JavaScript instead of templates gives developers a lot of programming power.

But remember:

The greater the ability, the greater the responsibility. Ben Parker

JSX is just JavaScript mixed with XML syntax, but once you have mastered it, it will make you feel comfortable to use it. This may just be my personal opinion, but I think it's much better than the Angular 1 style attribute. Angular 1 is really unbearable.

The opposite view is that Vue's template syntax removes the temptation to add logic to the view / component and maintains a separation of concerns.

It's worth mentioning that, like React, Vue technically supports render functions and JSX, but it's just not the default.

State Management vs object Properties

If you are familiar with React, you will know that state in the application is a key concept (React). There are also supporting frameworks designed to manage a large state object, such as Redux. In addition, the state object is immutable in React applications, meaning it cannot be changed directly (which may not be true). In React you need to use the setState () method to update the status.

AddToOrder (key) {/ / Make a copy of this.state const orders = {... this.state.orders}; / / update or add orders [key] = orders [key] + 1 | | 1; this.setState ({orders});}

In Vue, the state object is not required, and the data is managed by the data property in the Vue object.

Export default {name: 'app', data () {return {samplePasta: samplePasta, orders: {},... Methods: {handleOrder: function (key) {if (! this.orders.hasOwnProperty (key)) {this.$set (this.orders, key, {count: 0});} this.orders [key] .count + = 1;}

In Vue, there is no need to use methods such as setState () to change its state. In the Vue object, the data parameter is the preserver of the data in the application.

When it comes to managing state in large applications, you Yuxi, author of Vue.js, once said that the solution is suitable for small applications, but not for large applications.

In most cases, the state management built into the framework is not enough to support large applications, and state management schemes such as Redux or Vuex must be used.

In view of this, debating how to manage state in your application is likely to be premature optimization, and it is probably just a matter of personal preference. Besides, you may not have to worry about it.

React Native vs.?

React Native can create native applications on mobile phones, and React is a leader in this area. Using JavaScript, CSS and HTML to create native mobile applications is an important innovation. It is also good for the Vue community to work with Ali to develop the Vue version of React Native--Weex, but it is still under development and has not been verified by the actual project.

So who won the competition?

TLDR; JavaScript has no future. Let's use TypeScript together.

If you want to have brilliant experience with the JavaScript UI framework in the job market, then both React and Vue are good choices. React seems to be more popular, but Vue is also becoming more and more well known. If you want to upgrade your existing application to a new JavaScript framework, then I suggest you choose Vue. In fact, when you want to create a modern JavaScript application, both are good choices, depending on your preference.

This is the end of the article on "Comparative Analysis of Vue and React examples of Javascript Framework". Thank you for reading! I believe you all have a certain understanding of the knowledge of "Javascript Framework Vue and React case comparison and Analysis". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.