As a junior front-end who has been using vue, he also has a longing for learning. I chose vue only because my left-handed rock-paper-scissors lost to the right (just kidding).
After work, I also plan to spend some time to learn about react. React development on mobile is also a must.
Let's take a look at the introduction of Vue and React:
React：
Unless you have not been paying attention to the front-end development recently, you must have heard of React, a JavaScript UI framework created by Facebook. It supports
most Facebook sites including Instagram. React is different from the popular jQuery, Backbone.js and Angular 1 frameworks at the time. Its birth changed the
world of JavaScript. The biggest change is that React promoted Virtual DOM (we will explore later) and created a new syntax-JSX, which allows developers to
write HTML in JavaScript.
View:
Vue is committed to solving the same problem as React, but it provides another set of solutions. Vue uses a template 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 reconstruction. At the same time, Vue claims that it is easier to
learn. I only recently came into contact with Vue and I can prove that what I said is true. Another thing to say about Vue is that Vue is mainly maintained by a developer, not by a
large company such as Facebook like React .
As two currently popular front-end frameworks, I think the most obvious difference is that the two frameworks have different positioning of data:
1. React as a whole is a functional idea. The components are designed as pure components, and the state and logic are passed in through parameters. Therefore, in React, it is a one-way data flow. It is recommended to combine
immutable to achieve data immutability.
React will re-go the rendering process after setState. If shouldComponentUpdate returns true, it will continue to render. If it returns false, it will not
re-render. PureComponent rewrites shouldComponentUpdate, and then makes props and state shallow. Layer contrast.
2. The idea of vue is responsive, which is based on variable data. It monitors each attribute by establishing a Watcher. When the attribute changes, the
corresponding virtual dom is updated responsively.
There are similarities in it:
For example, they are all JavaScript UI frameworks, focusing on creating front-end rich applications. Different from the early "full-featured" JavaScript framework, Reat and Vue only have the skeleton of the framework, and other functions such as routing and state management are components of the framework's separation.
One of the biggest similarities between Vue.js (version 2.0) and React is that they both use something called'Virtual DOM'. The so-called Virtual DOM is basically what its name means: virtual DOM, the virtual representation of the DOM tree. Its birth is based on the concept that changing the real DOM state is much 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 must first make changes on the Virtual DOM instead of directly changing the real DOM. When there is a change, a new Virtual DOM object is created and the difference between the old and the new Virtual DOM is calculated. These differences will then be applied to the real DOM.
After formal practice, I found that it is also used as a front-end framework, but the overall concept is still very different:
For front-end novices, I recommend learning vue first, because vue combines html, css, and js together and uses their own processing methods. vue has single-file components, and you can write html, css, and js into one file. HTML provides a template engine to process. That is to say, the basic html knowledge you learned before can be used, and there is no strong logic when building the page. Vue has helped write it.
As for react, if you have learned a strong language, you should be more accustomed to using it. The idea of react is all in js, html is generated through js, so jsx is designed, and css is operated through js, community styled-component, jss Wait.
If you want your application to be as small and fast as possible, please choose Vue
When the state of the application changes, both React and Vue will build a virtual DOM and synchronize it with the real DOM. Both have their own methods to optimize this process.
The core developers of Vue provide a benchmark test, which shows that Vue's rendering system is faster than React's.
From a practical point of view, this benchmark is only related to edge cases, and this operation is not frequently performed in most applications, so this should not be regarded as an important comparison point. However, the page size is related to all projects. In this regard, Vue is once again leading the pack. Its current version is only 25.6KB after compression. To achieve the same functionality in React, you need React DOM (37.4KB) and React with Addon library (11.4KB), a total of 44.8KB, almost twice the size of Vue. Double the volume does not bring double the function.
If you plan to build a large application, choose React
A simple application implemented with Vue and React at the same time as the beginning of the article may make a developer more subconsciously inclined to Vue. This is because template-based applications look easier to understand at first glance and can run quickly. But the technical debt introduced by these benefits will prevent the application from expanding to a larger scale. Templates are prone to runtime errors that are hard to notice, and it is also difficult to test, refactor, and decompose.
In contrast, Javascript templates can be organized into components with good decomposition and dry (DRY) code, and dry code is more reusable and testable. Vue also has a component system and rendering functions, but React's rendering system is more configurable, and features such as shallow rendering, combined with React's testing tools, make the code more testable and maintainable it is good.
At the same time, React's immutable application state may not be concise enough to write, but it is of great significance in large-scale applications, because transparency and testability become critical in large-scale projects.
If you want a framework that is applicable to both web and native apps, please choose React
React Native is a library for building mobile native applications (iOS, Android) using Javascript. It is the same as React.js, but instead of using web components, it uses native components. If you have learned React.js, you can get started with React Native soon, and vice versa.