乐趣区

关于前端:前端开发框架之React-与-Vue-框架设计思路对比

jiezi

框架总览
前端框架繁多，在学习的时候也会陷入困惑，咱们应该抓住最支流的内容 Vue/React，深刻底层，尝试琢磨框架作者的设计思路，宽阔前端培训本人的视线，大家也不要把本人限度在框架之中，认为工作中用到 Vue，就感觉 React 学起来没用，有些时候咱们学习竞品的框架，是为了更好的意识本人在用的框架，废话不多说，因为 Vue 自身是个中庸的框架，再揪出设计思路理念比拟极致的 Angular 和 Svelte，咱们先从视图层最火的四大框架看一下

下载量

比照维度
咱们从多个维度去比照前端的框架，就能看清楚当初各个框架的现状，咱们学习每个框架的设计范式，并且尝试突破局限，就像猪八戒一样，出了高老庄，一路好景色

框架倒退
字符串模板
想看清当初视图层的现状，要简略的看下之前框架的倒退路线，JQuery 时代的渲染层，大部分都是基于字符串的模板，典型的框架就是 Underscore，baiduTemplate。大抵的原理就是把 template 解析成一个函数，毛病也很显著，就是每次数据变动，模板外部要全副从新渲染

而后方才我说的四个框架霸占了当初的 Web 畛域，外围的指标都是一样的，为了做出性能更好的 Web 利用，为此各路大神八仙过海，各显神通有这么几个宏观的维度
原生 VS 形象
原生的就是 JavaScript 自身，比方 JQuery 根本没有太多的形象，一个 $ 打天下，React 形象水平略微简单一些，须要了解 Component，State，Hooks，JSX 等概念就能够上手了，形象比拟多的就是 Angular，上手就须要理解十几个概念，学习曲线很平缓，Vue 就处在 React 和 Angular 两头，理解完 data，methods，单文件组建后就能够上手了

运行时 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 = true
callHook(vm, 'mounted')

})
预编译和运行时
相干概念方才曾经科普了，在 Vue 和 React 中的体现，次要体现在 JSX 和 template 的区别上，React 是齐全的 JSX，能够 JSX 在外面写 JavaScipt，所以特点就是足够的动静，与之对应的就是 Vue 的 template，template 的特点是语法受限，能够执行的语法技术 v-if v-for 等指定的语法，尽管不够动静，然而因为语法是可便当的，所以能够再预编译层面做更多的预判，让 Vue 在运行时有更好的性能
顺便放两张尤大的 ppt 的图，Vue3 通过在预编译阶阶段做动态标记的优化，做到了按需更新

  1. 纯动态的元素标记，间接越过 diff 阶段 比方 <p>hello</p>
  2. 动态的属性也会标记，在 diff 的时候越过这个属性的判断
  3. 事件函数传递的时候回加上缓存
  4. v-if 和 v-for 外部通过 block+ 数组的形式保护动静元素

工夫切片
Vue3 通过动态标记 + 响应式 + 虚构 dom 的形式，管制了 diff 的颗粒度，让 diff 的工夫不会超过 16ms，然而 React 自上而下的 diff 过程，我的项目大了之后，一旦 diff 的工夫超过 16.6ms，就会造成卡顿，对此 React 交出的解决方案就是工夫切片
简略的来说就是把 diff 的工作依照元素拆开，利用浏览器的闲暇工夫去算 diff，React 把各种优化的策略都留给了开发者，Vue 则是帮开发者做了很多优化的工作

设计思维演进
组合优于集成
这个思维设计模式外面就有定论，也是当初 hooks 和 composition 大行其道的起因，代码写进去也会更加易于保护，这个图能够很好地体现出可维护性上的变动

跨端
方才咱们讲了 Svelte 能够做到间接编译成 JavaScript，性能靠近原生，这么优良的思维，为什么 Vue 还要保留虚构 dom 这个额定的 runtime 损耗呢，我感觉比拟重要的一个答案就是跨端
虚构 dom 除了能够用来计算最小的 diff 之外，另外一个重要的性能就是能够用 JavaScript 的对象来去形容一个 dom，这就是一个一般的对象，在跨端畛域意义重大，视图层返回的是一个对象，渲染层能够调用不同平台的渲染 api 去绘制即可
温习
如上所述，请认真学习框架，并不只是为了面试，而是框架里的优良思维和设计模式，会集了顶尖开发者团队最优良的思维，多学习他人优良的代码，宽阔本人的视线，闭门造车你会发现，很多本人的顿悟只是他人的根底

退出移动版