东莞网站设计的公司,江门seo代理商,邢台信息港二手车出售,华为网站建设策划书大家好#xff0c;我是若川。今天分享一篇框架设计思路的好文。关于我 大家好我是花果山的大圣#xff0c;今天很荣幸#xff0c;有机会跟大家分享一下很多年轻人感兴趣的话题《 Vue 和 React 设计思想 PK》,个人水平有限#xff0c;如果有理解不到位的请倾盆#xff0c;大… 大家好我是若川。今天分享一篇框架设计思路的好文。关于我 大家好我是花果山的大圣今天很荣幸有机会跟大家分享一下很多年轻人感兴趣的话题《 Vue 和 React 设计思想 PK》,个人水平有限如果有理解不到位的请倾盆大家看完后并且再去 Vue 和 React 源码里探索一番一定会有所收获 如果没时间的话还可以跟我一起早起学习GithubB站掘金框架总览 前端框架繁多在学习的时候也会陷入困惑我们应该抓住最主流的内容 Vue/React深入底层尝试揣摩框架作者的设计思路开阔自己的视野大家也不要把自己限制在框架之中认为工作中用到 Vue就觉得 React 学起来没用有些时候我们学习竞品的框架是为了更好的认识自己在用的框架废话不多说由于 Vue 本身是个中庸的框架再揪出设计思路理念比较极致的 Angular 和 Svelte我们先从视图层最火的四大框架看一下下载量对比维度我们从多个维度去对比前端的框架就能看清楚现在各个框架的现状我们学习每个框架的设计范式并且尝试打破局限就像猪八戒一样出了高老庄一路好风光框架发展 字符串模板想看清现在视图层的现状要简单的看下之前框架的发展路线JQuery 时代的渲染层大部分都是基于字符串的模板典型的框架就是 UnderscorebaiduTemplate。大致的原理就是把 template 解析成一个函数缺点也很明显就是每次数据变化模板内部要全部重新渲染然后刚才我说的四个框架占领了现在的 Web 领域核心的目标都是一样的为了做出性能更好的 Web 应用为此各路大神八仙过海各显神通有这么几个宏观的维度原生 VS 抽象原生的就是 JavaScript 本身比如 JQuery 基本没有太多的抽象一个 $ 打天下React 抽象程度稍微复杂一些需要理解 Component State Hooks JSX 等概念就可以上手了抽象比较多的就是 Angular上手就需要了解十几个概念学习曲线很陡峭 Vue 就处在 React 和 Angular 中间了解完 datamethods单文件组建后就可以上手了运行时 VS 预编译另外一个维度就是运行时和预编译这个维度所谓运行时在浏览器内存里进行的任务React 的 Runtime 比较重一些数据发生变化后并没有直接去操作 dom而是生成一个新的虚拟 dom并且通过 diff 算法得出最小的操作行为全部都是在运行时来做的这个维度的另外一个极端也就是重编译的框架在上线之前经过通过工程化的方式做了预处理典型代表就是Svelte基本上是一个 Compiler Framework写的是模板和数据经过处理后基本解析成了原生的 dom 操作Svelte 的性能也是最接近原生 js 的Vue 依然处于比较中庸的地位在运行时和预编译取了一个很好地权衡保留了虚拟 dom通过响应式控制虚拟 dom 的颗粒度在预编译里又做了足够多的性能优化做到了按需更新这个一会再细聊框架设计的维度 Vue 和 React然后我们揪出来 Vue 和 React有一些更细化维度可变数据 VS 不可变数据Vue1 就是把响应式数据玩出了花通过拦截操作修改一个数据的同时收集依赖然后数据修改的时候去通知更新 dom体验很是舒爽我们修改了一个 JavaScript 的对象视图层就修改好了 这是 Vue 的黑魔法React 的虚拟 Dom 创建之日期就是通过计算新老数据的 diff去决定操作那些 dom所以每次修改数据需要生成一份新的数据说不上优劣之分只不过路线不同这大概就是 Vue 和 React 修改数据的代码对比权衡随着应用越来越复杂React15 架构中dom diff 的时间超过 16.6ms就可能会让页面卡顿Vue1 中的监听器过多也会让性能雪崩为了解决这个问题Vue 选择了权衡以组件作为颗粒度组件层面用响应式通知组件内部通过 dom diff 计算 既控制了应用内部 Watcher 的数量也控制了 dom diff 的量级。看到这段实现的时候不仅高呼真是妙啊 registerComponentHook(componentId, lifecycle, attach, () {callHook(vm, beforeMount)const updateComponent () {vm._update(vm._vnode, false)}new Watcher(vm, updateComponent, noop, null, true)vm._isMounted truecallHook(vm, mounted)})
预编译和运行时相关概念刚才已经科普了在 Vue 和 React 中的体现主要体现在 JSX 和 template 的区别上React 是完全的 JSX可以 JSX 在里面写 JavaScipt所以特点就是足够的动态与之对应的就是 Vue 的 templatetemplate 的特点是语法受限可以执行的语法技术 v-if v-for 等指定的语法虽然不够动态但是由于语法是可便利的所以可以再预编译层面做更多的预判让 Vue 在运行时有更好的性能顺便放两张尤大的 ppt 的图Vue3 通过在预编译阶阶段做静态标记的优化做到了按需更新纯静态的元素标记直接越过 diff 阶段 比如 phello/p静态的属性也会标记在 diff 的时候越过这个属性的判断事件函数传递的时候回加上缓存v-if 和 v-for 内部通过 block 数组的方式维护动态元素时间切片Vue3 通过静态标记 响应式 虚拟 dom 的方式控制了 diff 的颗粒度让 diff 的时间不会超过 16ms但是 React 自上而下的 diff 过程项目大了之后一旦 diff 的时间超过 16.6ms就会造成卡顿对此 React 交出的解决方案就是时间切片简单的来说就是把 diff 的任务按照元素拆开利用浏览器的空闲时间去算 diffReact 把各种优化的策略都留给了开发者Vue 则是帮开发者做了很多优化的工作设计思想演进 组合优于集成这个思想设计模式里面就有定论也是现在 hooks 和 composition 大行其道的原因代码写出来也会更加易于维护这个图可以很好地体现出可维护性上的变化跨端刚才我们讲了 Svelte 可以做到直接编译成 JavaScript性能接近原生这么优秀的思想为什么 Vue 还要保留虚拟 dom 这个额外的 runtime 损耗呢我觉得比较重要的一个答案就是跨端虚拟 dom 除了可以用来计算最小的 diff 之外另外一个重要的功能就是可以用 JavaScript 的对象来去描述一个 dom这就是一个普通的对象在跨端领域意义重大视图层返回的是一个对象渲染层可以调用不同平台的渲染 api 去绘制即可复习 如上所述请认真学习框架并不只是为了面试而是框架里的优秀思想和设计模式汇集了顶尖开发者团队最优秀的思想 多学习别人优秀的代码开阔自己的视野 闭门造车你会发现很多自己的顿悟只是别人的基础推荐书 最后推荐一本对我涨薪帮助最大的书《算法》第四版算法和数据结构一直都是前端工程师进阶的拦路虎之一这块内容比较成体系JavaScript 相关的算法书过于简单只能入门不能帮你学会算法 教材《算法导论》从数学的角度去推导算法又太难所以我推荐这本《算法》第四版内容详实有插画帮助系统的构架算法知识体系书里用的是 Java学习的时候正好用 JavaScript 实现一遍书里的例子学完绝对是一个新的段位当然我最大的爱好除了王者就是看书了其实有很多书可以推荐比如JavaScript 进阶的红黄绿三套书怎么和 HR 谈钱的《谈判是什么》和《优势谈判》和产品经理吹牛逼必备坛子 《浪潮之巅》《硅谷之谜》《软技能2》。。。。以后有机会再给大家推荐感谢大家的支持 我是大圣 下期再见常驻推荐阅读若川知乎高赞有哪些必看的 JS库我在阿里招前端我该怎么帮你现在还可以加模拟面试群如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办常驻末尾你好我是若川江西人~(点击蓝字了解我)历时一年只写了一个学习源码整体架构系列 有哪些必看的JS库jQuery、underscore、lodash、sentry、vuex、axios、koa、redux关注若川视野回复pdf 领取优质前端书籍pdf回复1可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以 分享、点赞、在看 呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
