React、Vue、Next、Umi框架对比

深藏阁楼爱情的钟 2022-09-09 09:53 1888阅读 0赞

### React、Vue、Next、Umi优缺点 ###

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

# React.js #

[官网文档][Link 1]

## 优点 ##

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

## 缺点 ##

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

# NEXT.js #

[官网文档][Link 2]

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

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

## 优点： ##

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

## 缺点： ##

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

# VUE.js #

[官网文档][Link 3]

## 优点： ##

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

## 缺点： ##

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

# Umi.js #

[官网文档][Link 4]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之后，接口可以转发，进行拦截做了一些公共的方法请求功能

[转载地址][Link 5]

[Link 1]: https://react.docschina.org/
[Link 2]: https://www.nextjs.cn/
[Link 3]: https://cn.vuejs.org/
[Link 4]: https://v2.umijs.org/
[Link 5]: https://blog.csdn.net/MichelleZhai/article/details/103865401