Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
next.js 是个很好的选择,Umi 很多功能是参考 next.js 做的。但Next.js可能是不够贴近业务,不够接地气。比如 antd、dva 的深度整合,比如国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等一线开发者才会遇到的问题。
在做一个后台数据管理的项目的过程中发现,手写造轮子费时又不够美观,而自己进行webpack配置的过程也十分痛苦,最后选择了这个框架进行开发。
开始
npm create umi
>antd pro
>v5
使用插件进行开发
@umijs/plugin-layout 使用antd布局,增加侧边栏
@umijs/plugin-locale 使用国际化,可以在简易开发过程中将其关闭
@umijs/plugin-dva 用dva进行数据流管理
@umijs/plugin-dva
创建文件
src/pages 下,子目录中 models 目录下的文件
src/pages 下,所有 model.ts 文件(不区分任何字母大小写)
model.ts
import { deleteOne, loadAirlineInfo, saveOne,updateOne } from "./service"
export default{
namespace:'airlineInfo',//命名空间,需要调用effects或者reducer时要加在type之前
state:{
list:[],
current:{},
showEdit:false,
isEdit:false,
},
//异步数据通过effects处理,调用service里的方法
effects:{
*loadData({},{call,put}:any){
const res=yield call(loadAirlineInfo)
console.log(res)
yield put({
type:'save',
payload:{
list:res.data,
showEdit:false,
isEdit:false
}
})
}
},
//同步数据通过reducers处理
reducers:{
save(state:any,{payload}:any){
return{...state,...payload}
}
}
}
index.tsx
interface PageProps extends ConnectProps {
info:any
}
//继承ConnectProps类型
const AirlineInfo: React.FC<PageProps> = (props) => {
const { dispatch } = props
const {list}=props.info
const intl = useIntl();
useEffect(() => {
dispatch({
type:"airlineInfo/loadData",
payload:{}
})
}, [])
)//初始化数据
return ...
}
export default connect((state: any) => {
return {
info: state.airlineInfo
}
})(AirlineInfo)
//connect是一个高阶函数,首先传入mapStateToProps、mapDispatchToProps,然后返回一个生产Component的函数(wrapWithConnect),然后再将真正的Component作为参数传入wrapWithConnect,这样就生产出一个经过包裹的Connect组件