跳到主要内容

react-vs-vue

React-vs-Vue​

待完善

共同点：

  1. 都使用了虚拟DOM
  2. 都提供了数据改变 -> 重新渲染的响应式系统
  3. 两者都是异步更新DOM，React中使用setState时不会立刻更新数据，而是加入缓存队列中，批量更新数据之后再渲染DOM；Vue中可以直接修改数据，但此时并不会直接渲染DOM，同样要加入缓存队列，再渲染DOM。

不同点：

  1. Vue中，只有纳入响应式系统的属性的值改变了（新增属性，或者依赖没有被收集的属性不算纳入响应式系统中），才会重新渲染；而React只要通过setState操作了数据，就会重新渲染
  2. Vue中，只有数据（state和props）改变时才会重新渲染；React中，对于非纯组件，如果父组件重新渲染，那么子资源也会重新渲染
  3. Vue组件通常需要提前规定好props，而react不用；Vue当传递给组件一个非props的值，会自动挂载给组件的根元素（对于多个元素需要使用$attr），而React并不会。

虚拟DOM​

虚拟DOM（VNode），可以粗略地把它理解为一个用来表示真实DOM树的JS对象。

无论Vue还是React，虚拟DOM都是通过数据和渲染函数生成的，对于Vue来说渲染函数是通过模板编译而来的。

第一次生成VNode时，会根据VNode来生成页面，也就是所谓的挂载。

之后当数据改变时，就会重新根据数据和渲染函数生成一个新的VNode。之后使用Diff算法来找出先后两个VNode之间的差异，并自动地对真实DOM进行操作。

虚拟DOM的优劣​

在框架前的时代，无论是用原生代码还是使用类似JQuery的类库，我们都是在直接操作真实DOM。

框架后时代，我们只需要操作数据，框架就会帮我们来操作真实DOM

优点

  1. 保证性能的下限。

    当我们使用虚拟DOM的时候，框架会帮我们完成DOM的操作，相当于是一个自动化的过程。

    想一想，一个前端菜鸟随便对真实DOM进行操作，一不小心就会写出低性能的代码。而当我们使用虚拟DOM，类似把我们的需求告诉我们的框架底层，让其进行真实DOM的操作。

  2. 跨平台。

    虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点

  1. 虚拟DOM的使用可以保证性能的下限，但也正是因为如此，它也无法做到极致的优化。毕竟，我们操作虚拟DOM的最终目的是操作真实DOM，那论性能的上限自然是无法与直接操作真实DOM相比。

单页/多页应用​

不要吐槽为什么这一节放在vue/react区别下面...

单页应用​

优点：

  1. 前后端分离
  2. 页面的切换流畅。

缺点：

  1. 首屏加载慢，容易出现首屏白屏的情况
  2. 对SEO不友好
多页应用​

好处

  1. 首屏加载快
  2. 对SEO友好

坏处

  1. 页面的切换不流畅。
服务端渲染/SSR​

笔者对SSR并没怎么接触，建议读者跳过该节的内容，目标只是稍微做一个笔记，并不代表严谨和正确。

单页应用的两大缺点，首屏加载和SEO不友好。对于前者，我们通常有类似路由懒加载，或者是骨架屏之类的解决方案；对于后者，谷歌的puppeteer似乎也是可以一定程度上解决的（只听闻过，未曾了解），puppeteer对我们SPA应用进行爬取，然后渲染出html，后端对请求进行判断，如果是爬虫请求，就将我们就走puppeteer渲染的服务器，如果是用户就直接走单页就好了。

服务端渲染也是用来解决单页应用的缺点的，当然，虽然可以一定程度上解决，开发的成本也会相应的提高。

目前我对服务端渲染了解的还不深，只能说大概的目标是通过在服务端渲染出HTML发送给浏览器，取代原本的：浏览器中执行JS代码生成完整的HTML。这样，爬虫就可以爬到完整的网页；不过服务端渲染也会提高服务器的开销。

通常的单页应用采取的是客户端渲染的方式。用户访问网站时通常只获取一个<div id='app'></div>，之后在浏览器中执行JS代码，生成完整的网页。而搜索引擎爬虫爬到网页后并不会执行JS代码，因此无法爬到网页的文本。

服务端渲染大概的目标是在服务端渲染网页再发送给前端，不过在解决前端SEO的问题的同时，也会给服务器带来额外的开销。

同构：指的是同一份代码，既可以跑在前端，也可以跑在后端。