#common
- Data Driven View
- Componentization
- Both use Virtual DOM
1. Data Driven View
In the era of jquery, we need to frequently operate the DOM to achieve page effects and interactions; Vue and React solve this pain point, adopting a data-driven view method to hide the frequent operations of operating the DOM. So when we develop, we only need to pay attention to data changes, but the implementation methods of the two are different.
2. Componentization
Both React and Vue follow the idea of componentization. They focus on the UI layer and divide the page into some small blocks. These blocks are components, and the combination and nesting of components form the final web interface. Therefore, there are the same routines during development, such as parent-child component transfer, data state management, front-end routing, slots, etc.
3.Virtual DOM
Both Vue and React use the Virtual DOM + Diff algorithm. Whether it is Vue's Template template + options api writing method, or React's Class or Function writing method, the render function is finally generated, and the render function returns VNode (the data structure of the virtual DOM , essentially a tree).
When the UI is updated every time, the latest VNode will be regenerated according to the render, and then compared with the old VNode cached before, and then the Diff algorithm (the core of the framework) will be used to update the real DOM (the virtual DOM is a js object structure, the same In the js engine, and the real DOM is in the browser rendering engine, so operating the virtual DOM is much less expensive than operating the real DOM).
#difference
Although both Vue and React are frameworks for building user interfaces, there are also big differences. First of all, the core ideas of the two are different.
1. Different core ideas
The positioning of Vue development is to lower the threshold of front-end development as much as possible, so that more people can get started with development faster. This is the main feature of Vue: a flexible and easy-to-use progressive framework for data interception/proxy, which is more sensitive and accurate to detect changes in data.
React's positioning from the very beginning is to propose new ideas for UI development. React, which is backed by the big company Facebook, has never lacked attention and users from the beginning, and what React wants to do is to subvert the front-end development method in a better way. So React advocates functional programming (pure components), immutable data and one-way data flow. Of course, where two-way is required, it can also be implemented manually, such as with onChange and setState.
Due to the difference in the core ideas of the two, there are many differences in the subsequent design of Vue and React.
2. Differences in component writing
The approach recommended by React is JSX + inline style, that is, all HTML and CSS are written into javascript, that is, all in js; the approach recommended by Vue is the single-file component format of template (easy to understand, easy to understand from the traditional front-end ), that is, html, css, and js are written in the same file (vue also supports JSX writing). This difference is partly due to the different core ideas of the two.
3. The diff algorithm is different
The traditional diff algorithm is to loop and recurse each node. Comparing all the nodes in the two trees one by one requires O(n²) complexity. During the comparison process, it is found that the old node is not found in the new tree, then the old node needs to be deleted, and a node of a tree should be deleted. (Find a suitable node to be deleted) The time complexity is O(n). Similarly, the complexity of adding a new node is also O(n). The complexity of diffing two trees together is O(n³ ). The complexity of the traditional Diff algorithm is too high, vue2.x has joined the Virtual Dom and react has the same diff optimization principle (reducing the algorithm complexity to O(n)).
The process ideas of the two are similar:
Different components produce different DOM structures. When the style is different, the corresponding DOM operation is to directly destroy the old DOM and create a new DOM. A group of child nodes at the same level can be distinguished by a unique key.
The core implementation of React's Diff algorithm
React first traverses the new collection, for(name in nextChildren), and uses the unique key to determine whether the same node exists in the old collection. If not, create it, if so, if(preChild === nextChild) will compare the position of the node in the new collection with the lastIndex in the old collection, if (child._mountIndex < lastIndex) perform a move operation, otherwise No move operation is performed. If during the traversal process, it is found that there are no nodes in the new collection, but there are nodes in the old collection, it will be deleted.
The core implementation of Vue's Diff algorithm
updateChildren is the core of vue diff, the process can be summarized as:
The old children and the new children each have two head and tail variables StartIdx and EndIdx, and their two variables are compared with each other. There are four comparison methods in total. If none of the four methods match, if the key is set, the key will be used for comparison. During the comparison, the variable will lean toward the middle. Once StartIdx > EndIdx indicates that at least one of the old children and the new children has been traversed, it will will end the comparison.
The core Diff algorithm of Vue2 adopts the algorithm of double-end comparison. At the same time, it starts to compare from both ends of the old and new children, and uses the key value to find reusable nodes, and then performs related operations. Compared with React's Diff algorithm, it can reduce the number of moving nodes in the same situation, reduce unnecessary performance loss, and is more elegant.
4. Responsive principles are different
Vue:
Vue relies on collection, automatic optimization, and variable data.
Vue recursively listens to all attributes of data and modifies them directly.
When the data changes, automatically find the referenced component and re-render.
React
React is based on a state machine, manually optimized, and the data is immutable. It needs setState to drive the new state to replace the old state. When the data changes, with the component as the root directory, all re-rendered by default, so the shouldComponentUpdate lifecycle function method is needed in React to control
5. Other differences
In addition to the above four differences, there are many differences in the detailed numbers. For example, the difference in APIs is quite large. In order to make it easier to use, Vue introduces concepts such as instructions and filters, as well as a large number of option APIs, such as watch and computed, which are very easy to use.
However, React has relatively few APIs. If your javascript foundation is relatively good, it is very easy to get started.