In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
Editor to share with you what is the use of vue and react, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
1. Panorama
Background 1. React: professional
React was born in 2011 (FaxJS)
July 3, 2013 v0.3.0
March 30, 2016 v0.14.8
April 9, 2016 v15.0.0
September 27, 2017 v16.0. 0. The official birth of dyke fiber
The hooks syntax is officially supported by react 16.8 in 2019.
October 22, 2020 v17
Resolve the problem:
What problem is React used to solve, the official website says: We build React to solve one problem:building large applications with data that changes over time.
2. Vue: legend
It started in 2013 as a personal project, but now it has become one of the three front-end frameworks in the world, especially in Chinese mainland. (interviewer asked: why did you learn to use vue? A: because of patriotism! )
In 2013, Youyuxi, who works at Google, was inspired by Angular to extract his favorite parts from it and developed a lightweight framework originally named Seed.
In December of the same year, the seed germinated and changed its name to Vue (because it is a view-level library, and vue is French for view), and the version number is 0.6.0.
On January 24th, 2014.01.24, Magi Vue was officially released to the public, the version number is 0.8.0.
Released on February 25, 2014, 0.9.0 has its own code name: Animatrix, which comes from the animated version of the Hacker Empire. Since then, major versions will have their own code names.
0.12.0 was released on June 13, 2015, codenamed Dragon Ball (Dragon Ball), when Vue broke out, and the first use of Vue,Vue in the Laravel community (the community of a popular PHP framework) became well known in the JS community.
1.0.0 Evangelion (Evangelical Warriors in the New Century) is the first milestone in the history of Vue. In the same year, vue-router (2015-08-18), vuex (2015-11-28) and vue-cli (2015-12-27) were released one after another, marking the development of Vue from a view-level library to a progressive framework. Many front-end students have also become users of Vue since this version (vue1 is pure responsive).
October 1, 2016 2.0.0 Ghost in the Shell (Shell Mobile team) is the second important milestone, which incorporates React's Virtual Dom scheme and supports server-side rendering.
Long before the release of Vue on February 4, 2019, the core team of Vue was busy with the development of vue-cli3.0, accumulated a lot of demand, and released the penultimate version of vue2 (released in 2020).
2020-09-18 it came with the mission of vue3, a framework that anyone can learn quickly and easily, and in the same year launched a new era packaging tool, vite (which may replace webpack in the future)
The mass base map of vue is shown below:
III. Technical thought
React is a functional idea as a whole, and components use jsx syntax, all in js, and it is relatively more flexible to incorporate both html and css into javaScript,jsx syntax.
The overall idea of vue is still to embrace the classic html (structure) + css (performance) + js (behavior) form. Vue encourages developers to use template templates and provides instructions for developers to use, such as v-if, v-show, v-for, etc., so when developing vue applications, there will be a feeling of writing classic web applications (structure, performance, behavior separation).
Some of the old data management (props, data vs state), component writing, and life cycle similarities and differences are not compared here.
1. The similarities and differences of key as an example.
1. React and vue have the same ultimate goal of adding key to the list: to get the corresponding vnode node in oldVnode more accurately and faster to improve performance. But there are some differences in the algorithms they implement.
1.1 react
When React renders an array, if the subcomponent does not provide key, it defaults to using the looping index as a key for the first rendering. The source code is essentially a violent comparison method: because the single-linked list fiber cannot use the double-pointer algorithm, it is impossible to use double-pointer optimization for the algorithm. In general, it goes through two rounds of traversal, the first round of traversal: dealing with updated nodes. Second round traversal: processes the remaining nodes that do not belong to the update.
In order to reduce the complexity of the algorithm, the diff of React has preset restrictions:
Diff only sibling elements. If a DOM node crosses the hierarchy between the two updates, React does not attempt to reuse it.
Two different types of elements produce different trees. If the element changes from div to pforce report, it destroys the div and its descendants, and creates a new p and its descendants.
First judge key and then judge type. If they are the same, they are the same node. Update > add / delete
1.2 vue
Vue is better than react in terms of diff performance. When I carefully read the source code and books, I was extremely impressed with the algorithm problem-- the longest increasing subsequence, for example: take the array [2,11,6 Personals 8,1] as an example: the final output result is [0meme2prime3], indicating that the index of the strongest growth sequence is 0Jing 2jue 3; the corresponding value is 2min 6m 8. In other words, the longest continuous growth of values in this array are the three elements in the array: 2, 6, 6, 8.
So what is the purpose of using this method after so much effort by vue3? In the process of DOM-Diff, Vue2 gives priority to dealing with special situations, that is, head-to-head comparison, head-to-tail comparison, and tail-to-tail ratio.
Vue3 in the DOM-Diff process, according to the newIndexToOldIndexMap new and old node index list to find the longest stable sequence, through the longest growth sub-sequence algorithm comparison, find out the new and old nodes do not need to move, in-situ reuse, only need to move or have patch (new and deleted nodes, etc.) nodes to operate, maximize the replacement efficiency, compared with the Vue2 version is a qualitative improvement!
2. Macro comparison of diff 2.1 react
In react, if the state of a component changes, react will re-render the component and all descendant components of the component. However, re-rendering does not mean that all the last rendering results will be discarded. React will still compare the virtual dom twice to the real dom through diff. Even so, diff actually has some overhead if the component tree is too large. React optimizes the diff algorithm through fiber internally, while developers are advised to use shouldComponentUpdate pureComponent to circumvent the problem.
2.2 vue
The responsiveness of vue2 is implemented by Object.defineProperty, and a series of operations such as getter`setter are rewritten to implement the observer pattern. Once the data changes, it does not compare the entire component tree like react, but updates the component instances where the data state has changed.
3. Lifecycle 3.1 react Lifecycle
Old 15.x-16
New 16 +
Other: componentDidCatch
The naming of the React life cycle has always been very semantic (whisper bb: it's smelly, long and hard to remember)
3.2 vue Lifecycle
4. Functional programming
Both sides have made large-scale changes, although the source code is different, but the design ideas and the simplicity of the code are indeed improving.
4.1 react hooks
The original tedious compomentDidUpdate life cycle = "useEffect is not exactly the same, but in most scenarios, from the developer's point of view, we are more concerned about the consequences (side effects) of data changes in props or state, eliminating the need for developers to compare the pre-and post-values. (this should be borrowed from vue watch by react.)
4.2 vue3 combined api
Vue3 combined api draws lessons from some of the ideas of react hooks, it has to be said that the blue is better than the blue, coupled with the framework itself has also made a lot of optimization work, in performance is not comparable to react.
Function () {useEffect (()) = > {/ / trigger console.log (demo)} when demo changes, [demo]) return (react)} import {reactive, watchEffect} from 'vue'export default {setup () {const state = reactive ({count: 0) Name: 'zs'}) watchEffect (() = > {console.log (state.count) console.log (state.name)}) return {state}}
Because of the responsive mechanism within the source code during initialization, the new APIwatchEffect does not even need to listen to who has changed to trigger side effects, because the whole process of listening is completed by the Proxy in the vue3 source code.
Not only that, vue3 has introduced a syntax that is closer to native js, like it!
Import {reactive, ref} from "vue"; / / progressive update: ref apilet val = ref (""); let todos = reactive ([{id: 0, title: "eat", done: false,}, {id: 1, title: "sleep", done: false,},]); function addTodo () {todos.push ({id: todos.length, title: val.value, done: false,}) Val.value = "";}
In fact, here, the vue technology stack students must be secretly complacent, pop up a vue yes! Unfortunately, such a good library also has problems. It is a clich é that vue2 responsive Object.defineProperty cannot listen for changes in array subscripts and new attribute values after objects. While vue3 uses Proxy Api to solve these problems, it also brings new problems, such as reactive can only pass objects (simple and complex values of react useState can do), while officially recommended ref needs .value to get values, which really makes the community frying pot. For this reason, the vue team was forced to launch toRefs under pressure (interested students can learn about it, I discussed it offline with Yibao before).
5. Event handling (@ Click vs onClick) 5.1 vue
The v-on (abbreviated:) instruction is used in vue to listen for DOM events and run some JavaScript code when triggered. You usually use v-on to receive the name of a method that needs to be called.
Welcomewelcome
Access the native DOM event and explicitly pass $event into the method
Welcome
Common element addEventListener, component $on
5.2 react
The event handling of the React element is similar to that of the DOM element, but with one difference in syntax:
React events are named in a small hump rather than pure lowercase.
When using JSX syntax, you need to pass in a function as an event handler, not a string.
Click meClick me {this.handleClick ()}} > Click meClick me
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: 234
*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.