First, similarities

  • Both keep their focus on the core library, leaving other functions such as routing and global state management to related libraries.
  • Each has its own build tool that allows you to get a project template set according to best practices.
  • Both use the Virtual DOM to improve redraw performance.
  • Both have the concept of props to allow data transfer between components.
  • Both encourage componentized applications, which are broken down into functional modules to improve reusability.

Two, the difference

1. The data flow

Vue supports bidirectional data binding by default, while React has always advocated one-way data flow.

2. The virtual DOM

Ve2. X introduced Virtual DOM to eliminate the difference between React and VE2. However, it still has its own features in specific details.

  • Vue claims to be able to calculate Virtual DOM differences faster because it tracks the dependencies of each component during rendering, without having to re-render the entire component tree.
  • With React, all child components are rerendered whenever the state of the application is changed. Of course, this can be achieved by PureComponent/shouldComponentUpdate the life cycle to control, but the Vue see this as the default optimization.

3. The modular

The biggest difference between Vue and React is how templates are written.

Vue encourages you to write templates that are similar to regular HTML elements, but with more attributes. React recommends that all of your templates be written using JSX, the JavaScript syntax extension.

Specifically speaking:

In Vue, since the data used by the template must hang on this for a transit, we need to declare it in components after importing a component. The Render function in React supports closures, so the components we import can be called directly in Render.

4. Different implementation principles of monitoring data changes

  • With getters/setters and some function hijacking, Vue can know exactly what the data is changing and achieve good performance without special optimization.
  • React the default was conducted by means of comparative reference, if you don’t optimize PureComponent/shouldComponentUpdate could lead to a lot of unnecessary VDOM to rendering, this is because the Vue is using a variable data, React puts more emphasis on immutable data.

5. Advanced components

Vue needs to be extended through mixins, while React can be extended through Higher Order Components (HOC).

The reason is that high-order components are actually high-order functions, and the React component itself is a built-in function, so high-order functions are a breeze for React. Instead, Vue uses HTML templates to create view components, which templates don’t compile efficiently, so Vue doesn’t use HOC.

6. Build tools

  • Vue ==> Vue-cli
  • React ==> Create React APP

7. A cross-platform

  • Vue ==> Weex
  • React ==> React Native