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

转载地址