Design ideas of react and Vue framework

Huaguoshan technical team 2021-02-23 04:07:28
design ideas react vue framework


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

image.png

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

  1. Github
  2. B standing
  3. Nuggets

image.png

image.png

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

image.png

Downloads

 The risk -Vue and React Design concept .008.jpeg The risk -Vue and React Design concept .009.jpeg

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

image.png

image.png

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

image.png

image.png

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

image.png

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

image.png

image.png

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 image.png

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

image.png

This is probably Vue and React Code comparison of modified data

image.png

image.png

image.png

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

image.png

 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

  1. Pure static element tags , Go straight over diff Stage such as <p>hello</p>
  2. Static properties are also marked , stay diff It's beyond the judgment of this attribute
  3. The event function passes back to the cache
  4. v-if and v-for Through internal block+ Arrays maintain dynamic elements

image.png

image.png

image.png

image.png

image.png

image.png

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

image.png

image.png

image.png image.png

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 image.png

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

image.png

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

image.png

image.png

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

  1. JavaScript Three sets of advanced red, yellow and green books
  2. How and HR Talking about the value of money 《 What is negotiation 》 and 《 Advantage negotiation 》
  3. Brag with the product manager 《 At the top of the wave 》《 The mystery of Silicon Valley 》
  4. 《 Soft skills 2》
  5. ....

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

版权声明
本文为[Huaguoshan technical team]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223024104503e.html

  1. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  2. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  3. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  4. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  5. High performance nginx HTTPS tuning
  6. JQuery advanced
  7. day 30 jQuery
  8. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  9. TCP/IP 开胃菜 之 HTTP
  10. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  11. JavaScript data type
  12. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  13. Solve Ajax cross domain problem [5 solutions]
  14. HTTP of TCP / IP appetizer
  15. Optimization of pod creation efficiency in serverless scenario
  16. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  17. First knowledge of HTTP / 1.1
  18. First knowledge of HTTP / 1.1
  19. Webpack learning notes series 05 devserver
  20. Webpack learning notes series 04 - resource processing optimization
  21. How to build a high performance front end intelligent reasoning engine
  22. How to become a professional front end engineer in 2021?
  23. How to transform single / micro service application into serverless application
  24. How to transform single / micro service application into serverless application
  25. How to transform single / micro service application into serverless application
  26. How to connect the ground gas to the micro front end?
  27. How to connect the ground gas to the micro front end?
  28. How to connect the ground gas to the micro front end?
  29. Vue server rendering principle analysis and introduction
  30. Realize the correct loading of text message
  31. Building my own project scaffolding with yeoman
  32. JavaScript advanced prototype and prototype chain
  33. React background management front end system (based on open source framework development) start
  34. JS practical skills breakpoint debugging
  35. I'd like to share with you 20 super easy-to-use Chrome extension plug-ins
  36. Get page element location
  37. Use the powerful API of modern browser to record any interface in the browser and realize export, save and management
  38. Delayed code execution in flutter
  39. Reconfiguration experience of KOA middleware system
  40. Add comments to your blog
  41. Svg editor -- new path
  42. Detailed explanation of debounce and throttle of JavaScript function
  43. Anti shake and throttling and corresponding react hooks package
  44. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  45. Front end, school recruitment, Taobao, guide
  46. [vue2 & G6] get started quickly
  47. Canvas from the beginning to the pig
  48. Take five minutes to standardize the code comments?
  49. Some thoughts on sass
  50. what?! You haven't filled in the award information yet
  51. How to get the interface + tsdoc needed by TS through swagger
  52. Binary tree
  53. Canvas drawing method in Web screenshot
  54. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  55. Become a big influence of technology? Coding pages quickly build personal blog
  56. Object and array deconstruction, spread operator, rest operator
  57. Analysis of Axios source code
  58. Two ways to delete useless code in project (Practical)
  59. Edit your picture with canvas
  60. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone