This article is about The great sage of Huaguo Mountain Some time ago, I chatted with you in the morning to share the manuscript For the sake of the team
Video version Please move B standing
React And Vue The design idea of the frame is big PK
This is the 17th - Front end early chat frame special , It's also an early chat 122 site
About me
Hello everyone, I'm the great saint of Huaguo Mountain , It's a great honor today , I have the opportunity to share with you a lot of topics that young people are interested in 《 Vue and React design idea PK》, Limited personal level , If you don't understand, please pour it in , After you've seen it, you can go again Vue and React Explore the source code , There must be gains , If there's no time , You can also get up early to study with me
Framework Overview
There are many front-end frames , I will be confused when I study , We should grasp the most mainstream content Vue/React, Down to the bottom , Try to figure out the design idea of the framework author , Broaden your horizons , Don't confine yourself to the framework , I think it's used in my work Vue, I think React It's no use learning , Sometimes we learn the framework of competitive products , To better understand the framework you are using , I don't say much nonsense , because Vue It's a framework of moderation in itself , And then find out the ultimate design ideas Angular and Svelte, Let's take a look at the four most popular frames in the view layer
Downloads
Contrast dimensions
We compare the front-end framework from multiple dimensions , We can see clearly the current situation of each framework , We learn the design paradigm for each framework , And try to break the limits , It's like pig Bajie , Out of gaolaozhuang , Good scenery all the way
Framework development
String template
Want to see the current status of view layer , Take a simple look at the development route of the previous framework ,JQuery The rendering layer of the times , Most of them are string based templates , The typical framework is Underscore,baiduTemplate. The general principle is to put template Resolves to a function , The disadvantages are obvious , Every time the data changes , The interior of the template should be completely re rendered
Then the four frameworks I just mentioned occupied the present Web field , The core goal is the same , In order to make better performance Web application , For this reason, eight immortals from all walks of life cross the sea , There are several macro dimensions of each magic power
Native VS abstract
The original is JavaScript In itself , such as JQuery There's basically not much abstraction , One $ Fight the world ,React A little more abstract , You need to understand Component, State, Hooks, JSX And so on , More abstract is Angular, You need to know more than a dozen concepts to get started , The learning curve is steep , Vue It's in React and Angular middle , To understand the data,methods, After a single file is set up, you can get started
Runtime VS precompile
Another dimension is runtime and precompile , The so-called runtime , Tasks in browser memory ,React Of Runtime It's heavier , After data changes , I didn't do it directly dom, It's about creating a new virtual dom, And through diff The algorithm gets the minimum operation behavior , It's all done at runtime
The other extreme of this dimension , That's the recompiled framework , Before going online, it has been preprocessed in an engineering way , The typical representative is Svelte, It's basically a Compiler Framework, It's about templates and data , After treatment , Basically, it's original dom operation ,Svelte Its performance is also the closest to native js Of
Vue Still in a more moderate position , A good trade-off between runtime and precompile , Keep the virtual dom, Through responsive control of virtual dom The particle size of , Enough performance optimization has been done in the precompile , It has been updated on demand , I'll talk about this later
The dimension of frame design
Vue and React
And then we found out Vue and React, There are some more detailed dimensions 
Variable data VS Immutable data
Vue1 It's playing with responsive data , By intercepting , Collecting dependencies while modifying a data , Then when the data is modified, it will be notified of the update dom, The experience is very relaxing , We've modified one JavaScript The object of , The view layer is modified , This is a Vue Black magic of ,React The virtual Dom Date of creation , It's by calculating the old and new data diff, To decide what to do dom, So every time you change the data , Need to generate a new data , It's not good or bad , It's just different routes
This is probably Vue and React Code comparison of modified data
Balance
As applications become more complex ,React15 Architecture ,dom diff More time than 16.6ms, It's likely to get the page stuck ,Vue1 There are too many listeners in , It's also a performance avalanche , To solve this problem ,Vue Chose to weigh , Take the component as the particle size , The component level uses responsive notification , Internal pass of components dom diff Calculation , It not only controls the inside of the application Watcher The number of , And I control dom diff The magnitude of . When you see this realization , Not only shouting , It's wonderful
registerComponentHook(componentId, 'lifecycle', 'attach', () => {
callHook(vm, 'beforeMount')
const updateComponent = () => {
vm._update(vm._vnode, false)
}
new Watcher(vm, updateComponent, noop, null, true)
vm._isMounted = true
callHook(vm, 'mounted')
})
Copy code Precompile and runtime
Relevant concepts have just been popularized , stay Vue and React Embodiment in , Mainly reflected in JSX and template On the difference between the two ,React It's complete JSX, Sure JSX Write... In it JavaScipt, So the characteristic is enough dynamic , It corresponds to Vue Of template,template It is characterized by grammar restriction , Executable syntax techniques v-if v-for And so on , It's not very dynamic , But because grammar is convenient , So you can do more prediction at the precompile level , Give Way Vue Better performance at runtime
By the way, two extra large ones ppt Graph ,Vue3 Through the optimization of static marking in the precompile stage , It has been updated on demand
- Pure static element tags , Go straight over diff Stage such as
<p>hello</p> - Static properties are also marked , stay diff It's beyond the judgment of this attribute
- The event function passes back to the cache
v-ifandv-forThrough internal block+ Arrays maintain dynamic elements
Time slice
Vue3 Through static tagging + Response type + fictitious dom The way , Controlled diff The particle size of , Give Way diff It won't take longer than 16ms, however React Top down diff The process , When the project is big , once diff More time than 16.6ms, It's going to cause a jam , Regarding this React The solution is time slicing
To put it simply, put diff The task is divided into elements , Use your browser's free time to calculate diff,React All kinds of optimization strategies are left to developers ,Vue It helps developers to do a lot of optimization work
The evolution of design ideas
Combination is better than integration
There is a conclusion in this design pattern , And now hooks and composition The reason why it's so popular , The code will also be easier to maintain when it's written , This diagram can well reflect the changes in maintainability 
Straddle
Just now we talked about Svelte It can be directly compiled into JavaScript, Performance close to native , Such a good idea , Why? Vue And keep the virtual dom This extra runtime And the loss , From the present point of view , I think the more important answer is cross terminal
fictitious dom In addition to being able to calculate the smallest diff outside , Another important function is to use JavaScript To describe a dom, This is a common object , It's significant in the cross end domain , The view layer returns an object , The rendering layer can call rendering on different platforms api Just go and draw
review
As mentioned above , Please study the framework carefully , Not just for the interview , It's good ideas and design patterns in the framework , It brings together the best ideas of the top developer team , Learn from other people's excellent code , Broaden your horizons , Behind closed doors, you'll find , Many of our own epiphanies are just the foundation of others
References
Finally, I recommend a book which is the most helpful to my salary increase 《 Algorithm 》 The Fourth Edition
Algorithms and data structures have always been one of the obstacles to the advancement of front-end engineers , This content is relatively systematic ,JavaScript The related algorithm book is too simple , It's just the beginning , Can't help you learn algorithms , The teaching material 《 Introduction to algorithms 》 From a mathematical point of view to deduce the algorithm , It's too hard , So I recommend this 《 Algorithm 》 The Fourth Edition , The content is detailed, with illustrations , Help system architecture algorithm knowledge system , The book uses Java, It's a good time to use JavaScript Implement the examples in the book , It's definitely a new rank after learning
Of course , My biggest hobby is the king , Just reading , There are many books to recommend , such as
- JavaScript Three sets of advanced red, yellow and green books
- How and HR Talking about the value of money 《 What is negotiation 》 and 《 Advantage negotiation 》
- Brag with the product manager 《 At the top of the wave 》《 The mystery of Silicon Valley 》
- 《 Soft skills 2》
- ....
I'll recommend it to you later , Thank you for your support , I am the great saint , See you next time
Don't forget to praise the article Also welcome the official account. 【 The front of Huaguo Mountain 】 And mine. B standing , More original videos will be uploaded in the future