React、Vue、Next、Umi框架对比

React、Vue、Next、Umi优缺点

  • React.js
    • 优点
    • 缺点
  • NEXT.js
    • 优点:
    • 缺点:
  • VUE.js
    • 优点:
    • 缺点:
  • Umi.js
    • 特点:
    • 优点
    • 缺点
  • JavaScript
    • 优点:
    • 缺点:
  • Jquery与react、vue、next、umi的区别

React.js

官网文档

优点

1、React运用一个虚拟的DOM实现了一个非常强大的渲染系统,在React中对DOM只更新不读取;
2、一切都是component,代码更加模块化,重用代码更容易,可维护性高
3、单向数据流
4、同构和服务端渲染可以更好的SEO和解决白屏问题

缺点

1、 它不是一个框架,它只是MVC(模型 - 视图 - 控制器)中的view
2、 jsx的一个问题是,渲染函数常常包含大量逻辑,最终看着更像是程序片段,而不是视觉呈现。后期如果发生需求更改,维护起来工作量大
3、 需要配合router和Flux/Mbox才能写大型应用

NEXT.js

官网文档

当使用 React 开发系统的时候,常常需要配置很多繁琐的参数,如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO,要考虑的事情就更多了,怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情,需要引入很多第三方库。

针对这些问题,Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置

优点:

  • next是react的完善应用框架,上手快,动态载入、async开箱即用,
  • 提供server rendering和code splitting获得更快的网页加载速度;
  • 支持Babel和Webpack的配置项定制,支持热模块替换
  • 支持TS

缺点:

  • 内置webapck配置,调试难度大
  • 路由嵌套、具名路由,使用query代替具名路解决
  • 页面缓存服务端渲染耗时过长造成服务器资源的浪费
  • 引入三方插件版本不兼容的问题

VUE.js

官网文档

优点:

1、 数据模型数据双向绑定”MVVM模式,当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据
2、 入门快、轻量化、模块友好

缺点:

1、 社区不大,生态环境没有React好,遇到的问题很少见到社区有在讨论
2、 功能仅限于 view 层,Ajax 等功能需要额外的库

Umi.js

官网文档umi 是一个基于路由的框架,支持类似 next.js 的常规路由和各种高级路由功能,比如路由级的按需加载,umi 是蚂蚁金服的基础前端框架,配合antd使用特别适合企业级别的平台管理系统的框架

特点:

  • 可插拔:umi 的整个生命周期都是由插件组成的。pwa、按需加载、一键切换preact、一键兼容ie9等功能,都是通过插件实现的。
  • 开箱即用:只需要一个 umi 依赖即可开始开发,无需安装 react、preact、webpack、react-router、babel、jest 等
  • 常规路由:Next.js 喜欢和功能齐全的路由约定,支持权限、动态路由、嵌套路由等。
  • 支持渲染降级:优先使用 SSR,如果服务端渲染失败,自动降级为客户端渲染(CSR),不影响正常业务流程。

优点

  • 项目结构很清晰,根据页面路由直接定位目录文件
  • 支持插件很多,按需使用(http mock、service worker、layout、高清方案等,都是一个个的插件)
  • 性能更优:整合了那么多东西, 运行速度还是快如闪电(PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical CSS、preload、hash build、preact 等等)
  • 和next.js类似,内含webpack配置等多项配置

缺点

  • Next 和 Umi 都完全支持构建用于生产的 React 应用程序,几乎不需要配置。Next 对编写 CSS 和自定义其 webpack 配置有更完整的支持,而 Umi 更固执己见,对 webpack 配置的支持并不多。
  • Next 有自己的一组插件,umi 的内部功能都是第三方插件。
  • 命令行支持:Umi 有一些有趣的 CLI 支持来生成页面并检查当前的 webpack 配置,Next 的 CLI 支持仅专注于帮助您部署应用程序。

JavaScript

JavaScript 通常是运行在前端,混合在HTML中的JS脚本程序直接被浏览器解释执行,以提高页面的美观性和UI操作响应速度为基本目标。

JS控制页面显示、数据较验、数据临时存储(例如:cookie、浏览器支持的数据、localStorage等)等这些功能。

区分JSP:JSP是运行在后台服务器上,混合在HTML中的java程序段,用于控制HTML的动态生成,并且通常负责调用后台数据库中的数据,传到前台,具有丰富数据交互效果的页面

优点:

1、在程序运行过程中被逐行地解释。

JavaScript与HTML标识结合在一起,从而方便用户的使用操作。

2、一种相对安全的脚本语言。

JavaScript作为一种安全性语言,不被允许访问本地的硬盘,且不能将数据存入服务器,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统的非法访问。

3、一种跨平台性脚本语言。

JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。

缺点:

1、各浏览器厂商对JavaScript支持程度不同

2、“Web安全性”对JavaScript一些功能牺牲。

3、纯粹的JavaScript将不能打开、读写和保存用户计算机上的文件。其有权访问的唯一信息就是该JavaScript所嵌入的那个Web主页中的信息,简言之,JavaScript将只存在于它自己的小小世界—Web主页里。

每次状态改变时,使用JavaScript重新渲染整个页面会非常慢,这应该归咎于读取和更新DOM的性能问题

JavaScript方案——按需要更新每一个元素——要慢

Jquery与react、vue、next、umi的区别

1.数据与视图分离

jquery的数据与视图没有分离,数据和视图是混在一起的,而vue框架对数据和视图进行了分离,解耦(开放封闭原则,对扩展开放对修改封闭)

2.数据驱动视图

通过数据去驱动视图的变化,只关心数据的变化,dom操作被封装

换言之就是

1、服务端渲染VS客户端渲染

传统的jsp或者模板渲染,都是服务端渲染,就是客户端一个请求,服务器直接把整个页面返回给你,简单粗暴
现有React\vue是前后端分离,通过api进行交互,客户端请求服务器返回json数据,由客户端进行渲染。
而SSR服务端渲染也可以解决客户端首屏加载慢的问题

2、渲染优雅,新框架组件化、模块化的代码易维护

jQuery是通过DOM来控制数据,不仅笨重且渲染且较麻烦

现有框架React(mvc)、vue(mvvm)通过数据来控制状态,通过控制数据来控制渲染

3、项目工程化:

  • jquery之前需要使用第三方的插件时,直接通过script标签引入,而现有的框架有了打包工具之后,结合npm直接安装第三方库
  • 有了node之后,接口可以转发,进行拦截做了一些公共的方法请求功能

转载地址

你可能感兴趣的:(react,javascript,https,react.js,vue.js)