In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)05/31 Report--
In this article, the editor introduces in detail "what is the difference between vue and react", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the difference between vue and react" can help you solve your doubts.
The specific analysis is as follows:
1. The implementation principle of monitoring data change is different.
Vue can accurately know the data changes through the hijacking of getter/setter and some functions.
React is done by default by comparing references (diff), and if not optimized, it may result in a large number of unnecessary re-rendering of VDOM. Why doesn't React precisely listen for changes in data? This is because of the difference in design concepts between Vue and React. Vue uses variable data, while React emphasizes the immutability of data. There is no difference between good and bad, Vue is simpler, and React is more robust when building large applications.
two。 Differences in data flow
Two kinds of bidirectional binding can be implemented in Vue1.0: between parent and child components, props can be bidirectionally bound, and components and DOM can be bidirectionally bound through v-model. The first is removed from Vue2.x, that is, there is no two-way binding between parent and child components (but a syntax sugar is provided to automatically modify it through events), and Vue2.x has discouraged components from making any changes to their own props.
React does not support bidirectional binding and advocates unidirectional data flow, which is called the onChange/setState () pattern. However, because we generally use one-way data flow state management frameworks such as Vuex and Redux, most of the time we don't feel the difference.
3.HoC and mixins
The way Vue combines different functions is that the component in mixin,Vue is a wrapped function, not simply the object or function that we pass in when we define the component. For example, how is the template we defined compiled? Such as how did the declared props receive it? These are all things that vue does implicitly when creating component instances. Since vue has done so much for us silently, if we directly wrap the declaration of the component and return a HoC, then the wrapped component will not work properly.
The way React combines different functions is through HoC (high-level components). React first used mixins, but later they decided that too much intrusion into components in this way would cause a lot of problems, so they abandoned mixinx and switched to HoC. The high-order component is essentially a high-order function, and the component of React is a pure function, so the high-order function is very simple for React.
4. Differences in component communication
There are three ways to achieve component communication in Vue: the parent component passes data or callback to the child component through props, although callback can be passed, but we usually only pass data; the child component sends messages to the parent component through events; and the parent component injects data into the child component through the new provide/inject in V2.2.0, which can span multiple levels.
There are also three corresponding ways in React: the parent component can pass data or callback to the child component through props, and cross-level communication can be carried out through context, which is similar to that played by provide/inject. React itself does not support custom events, and there are two ways for Vue subcomponents to pass messages to the parent component: events and callback functions, but Vue prefers to use events. We all use callback functions in React, which is probably the biggest difference between them.
5. Different rendering methods of templates
On the surface, the syntax of the template is different, and React renders the template through JSX. Vue is rendered through an extended HTML syntax, but this is only superficial. After all, React does not have to rely on JSX.
At a deep level, the principles of templates are different, which is their essential difference: React is in the component JS code, through native JS to achieve common syntax in templates, such as interpolation, conditions, loops, etc., are achieved through JS syntax, more pure and more native. Vue is implemented through instructions in a separate template separate from the component JS code, such as conditional statements that require v-if to do this, which is a bit unique and messy with HTML.
For example, illustrate the benefits of React: the render function in react supports closure features, so our import components can be called directly in render. But in Vue, because the data used in the template must be hung on this for a transfer, we need to declare it again in components after we have finished import a component, which is obviously very strange but has to be done.
6. The rendering process is different
Vue can calculate Virtual DOM differences faster because it tracks the dependencies of each component during rendering without having to re-render the entire component tree.
When the state of the application of React is changed, all sub-components are re-rendered. This can be controlled through the lifecycle approach of shouldComponentUpdate, but Vue regards this as the default optimization.
If the interaction in the application is complex and you need to deal with a large number of UI changes, then using Virtual DOM is a good idea. If you update elements infrequently, then Virtual DOM is not necessarily applicable, and performance is probably not as good as direct manipulation of DOM.
7. The framework is different in nature.
Vue is essentially a MVVM framework, developed from MVC.
React is a front-end component-based framework, developed from the back-end component.
The difference between 8.Vuex and Redux
On the face of it, there are some differences between store injection and usage. In Vuex, $store is injected directly into the component instance, so it can be used flexibly: submit updates using dispatch, commit, and read data through mapState or directly through this.$store. In Redux, each of our components needs to be displayed to connect the required props and dispatch with connect. In addition, Vuex is more flexible. Components can either dispatch action or commit updates, while dispatch can only be done in Redux, and reducer cannot be directly called for modification.
In terms of implementation principle, the biggest difference is two points: Redux uses immutable data, while Vuex data is mutable, so every time Redux replaces the old state with a new state, while Vuex modifies directly. When Redux detects data changes, it compares differences through diff, while Vuex, like Vue, is compared through getter/setter. The difference between these two points is also due to the different design concepts of React and Vue. React is more inclined to build stable and large-scale applications, which is very scientific. In contrast, Vue tends to solve problems simply and quickly, is more flexible, and is less strict in following the rules. Therefore, it will also give people the feeling of using React for large projects and Vue for small projects.
After reading this, the article "what's the difference between vue and react" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.