Dry goods! Teach you how to choose Vue and React

  • 2021-08-03 09:08:58
  • OfStack

The similarities between the two

It is also a lightweight framework based on component development, and it is also a view view layer focusing on user interface.

How to choose

1.1 If you like to build applications with templates (or have this idea), choose Vue

The Vue application defaults to placing markup in HTML, data binding expressions like Angular1, in the form of {{}}, while directives (special HTML attributes) are used to add functionality to the template


<div> <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JS
new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 },
 methods: {
 reverseMessage: function () {
  this.message = this.message.split('').reverse().join('');
 }
 }
});

React uses the JSX syntax (DOM is created in JavaScript) instead of using templates.


<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  message: 'Hello React.js!'
 };
 }
 reverseMessage() {
 this.setState({ 
  message: this.state.message.split('').reverse().join('') 
 });
 }
 render() {
 return (
  <div>
  <p>{this.state.message}</p>
  <button onClick={() => this.reverseMessage()}>
   Reverse Message
  </button>
  </div>
 )
 }
}
ReactDOM.render(App, document.getElementById('app'));

Templates can better separate layout and functionality, but you need to learn all the HTML extension syntax, while rendering functions only need the standard HTML and JavaScript.

Note: vue 2.0 provides the option to use templates and rendering functions

1.2 For simple syntax and faster rendering speed, choose vue

Using Vue does not require translation and runs directly in a browser, but the React code relies heavily on JSX and ES 6 syntax.

1.2. 1 Different ways of processing data

The data of vue is variable, and the data of React is immutable


//vue
this.message = this.message.split('').reverse().join('');
//React
this.setState({ 
 message: this.state.message.split('').reverse().join('') 
});

For state data changes, Vue is faster and more efficient than React's re-rendering system.

1.3 To build a large application, select React

The use of templates will prevent the application from expanding to a larger scale. Templates are prone to runtime errors that are difficult to notice, and it is also difficult to test, reconstruct and decompose.

1.4 For a framework that works on both the web side and the native APP, select React

React Native is a library that uses JavaScript to build mobile native applications (ios Android), which is the same as React. js is the same except that instead of using web components, you use native components, and if you know one of them, you will know the other one.
In this way, both web and mobile can be used.

1.5 For the largest ecosystem, the most comprehensive problem solving, more complete tools and plug-ins can use React

According to quantitative statistics, the download volume of React on npm is 2.5 million/month, and that of vue is 225,000/month

React is facebook and will be fully supported and maintained. vue is Youyuxi

Maintained by a small team led by him.

In summary 1, we found that the advantages of Vue are:

-Flexible selection of templates and rendering functions
-Simple syntax and project configuration
-Faster rendering speed and smaller volume

The advantages of React are:

-Better suitability for large-scale applications and better testability
-Web end and mobile end native APP take-all
-Larger ecosystem, more support and easy-to-use tools
-However, React and Vue are both excellent frameworks, they have more in common than differences-and most of the excellent features are interlinked:
* Fast rendering with virtual DOM
* Lightweight
* Responsive components
* Server-side rendering
* It is difficult to integrate routing tools, packaging tools and status management tools
* Excellent support and community


Related articles: