react 之 umi(乌米)--入门介绍
介绍
umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。
umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。
#特性
- ? 开箱即用,内置 react、react-router 等
- ? 类 next.js 且功能完备的路由约定,同时支持配置的路由方式
- ? 完善的插件体系,覆盖从源码到构建产物的每个生命周期
- ? 高性能,通过插件支持 PWA、以路由为单元的 code splitting 等
- ? 支持静态页面导出,适配各种环境,比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
- ? 开发启动快,支持一键开启 dll 等
- ? 一键兼容到 IE9,基于 umi-plugin-polyfills
- ? 完善的 TypeScript 支持,包括 d.ts 定义和 umi test
- ? 与 dva 数据流的深入融合,支持 duck directory、model 的自动加载、code splitting 等等
#架构
下图是 umi 的架构图。
#从源码到上线的生命周期管理
市面上的框架基本都是从源码到构建产物,很少会考虑到各种发布流程,而 umi 则多走了这一步。
下图是 umi 从源码到上线的一个流程。
umi 首先会加载用户的配置和插件,然后基于配置或者目录,生成一份路由配置,再基于此路由配置,把 JS/CSS 源码和 HTML 完整地串联起来。用户配置的参数和插件会影响流程里的每个环节。
#他和 dva、roadhog 是什么关系?
简单来说,
- roadhog 是基于 webpack 的封装工具,目的是简化 webpack 的配置
- umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发
- dva 目前是纯粹的数据流,和 umi 以及 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用,个人觉得 umi + dva 是比较搭的
#为什么不是...?
#next.js
next.js 的功能相对比较简单,比如他的路由配置并不支持一些高级的用法,比如布局、嵌套路由、权限路由等等,而这些在企业级的应用中是很常见的。相比 next.js,umi 在约定式路由的功能层面会更像 nuxt.js 一些。
#roadhog
roadhog 是比较纯粹的 webpack 封装工具,作为一个工具,他能做的就比较有限(限于 webpack 层)。而 umi 则等于 roadhog + 路由 + HTML 生成 + 完善的插件机制,所以能在提升开发者效率方面发挥出更大的价值。
react 之 umi(乌米)--入门介绍相关推荐
- react、umi、dva
React 一.React的简介 1.介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). Rea ...
- React Native 移动开发入门与实战
课程简介 本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
- 视频教程-React 全家桶从入门到实战到源码-其他
React 全家桶从入门到实战到源码 上市公司前端开发工程师,专注于 React 技术栈,对 React 全家桶从 react-router 路由到 Redux 状态管理工具再到 webpack 打包 ...
- 视频教程-新React+VUE前端教程入门到精通-Vue
新React+VUE前端教程入门到精通 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客户, ...
- uni-app入门介绍
uni-app入门介绍 软件开发的时间通常是这样的:一开始的 90% 开发工作用掉了整个计划 90% 的时间,剩下的 10% 同样需要整个计划 90% 的时间,而最终发布前的修改也是如此.-- 汤姆 ...
- 坚如磐石的React.js基础:入门指南
by Rajat Saxena 通过拉贾特·萨克森纳(Rajat Saxena) 坚如磐石的React.js基础:入门指南 (Rock Solid React.js Foundations: A Be ...
- .NET读写Excel工具Spire.Xls使用(1)入门介绍
原文:[原创].NET读写Excel工具Spire.Xls使用(1)入门介绍 在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式 ...
- 独家 | 集成学习入门介绍
作者:Jason Brownlee 翻译:wwl 校对:王琦 本文约3300字,建议阅读8分钟. 本文介绍了我们在生活中的许多决定包括了其他人的意见,由于群体的智慧,有的时候群体的决策优于个体.在机器 ...
- SpringBoot 2.0 系列001 -- 入门介绍以及相关概念
为什么80%的码农都做不了架构师?>>> SpringBoot 2.0 系列001 -- 入门介绍以及相关概念 什么是SpringBoot? 项目地址:http://proje ...
最新文章
- XML编辑器之XMLSpy2005
- Facebook 最新力作 FBNetV3来了!相比 ResNeSt 提速 5 倍,精度不输 EfficientNet
- C语言十六进制转八进制(附完整源码)
- [机器学习] 分类 --- Naive Bayes(朴素贝叶斯)
- 快速入门人工智能的方法,持续更新ing
- c语言找到串口,再次熟悉串口
- php中如何实现多进程
- Leetcode学习成长记:天池leetcode基础训练营Task02链表
- Julia-整数和浮点数
- python实现推荐系统(一)
- 双二极管(BAT54S)在电路中起什么作用? 钳位和保护
- mysql授权账号查询权限_【MySQL】MySQL授权与用户权限查询
- 台式网卡计算机,台式机万能网卡驱动,教您如何给台式机安装万能网卡驱动
- 万科java_万科面试总结
- 学信号处理要理解均值、平均偏差、标准差、方差
- proteus仿真运行时出现的错误
- 病毒入侵:全靠分布式 Gossip 协议
- 洛谷 P5713	【深基3.例5】洛谷团队系统 C语言
- 《产品经理深入浅出》PART 3:产品经理专业技能
- Win7 启用Guest账户,设置登录界面不显示 Guest账户
热门文章
- 为什么年龄大了近视还增加_为什么近视眼的人,年龄大了以后眼睛又会老花??...
- python正则实战爬虫demo+数据清洗+存储到mysql数据库=你还在等什么?
- 實戰案例:微信支付篇 (1) 前言
- [git] git中origin的含义
- vs code主题_VS Code的10个Pretty Light主题
- 【ElasticSearch7.X】学习笔记(一)
- 【AI绘画】AI绘画的创意应用
- Citavi、Endnote、Mendeley 功能大比拼!到底哪一款才是众望所归的终极文献管理软件?...
- 捕鱼达人中的概率——命中率和奖池公式研究
- 晋中学院08计算机校友,2017年晋中学院全国排名第578名