react+dva+antd+umi项目初识1

一、react.js

React是一个声明式（区分于命令式编程）的、高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成复杂的ui界面，这些代码片段被称作“组件”。

二、dva

易学易用：仅有6个api，对redux用户尤其友好，配合umi使用后更是降低为0 api

elm概念：通过reducers、effects和subscriptions组织model

插件机制：比如dva-loading可以自动处理loading状态，不用一遍遍的写showloading和hideLoading

支持HMR（热编译）：基于babel-plugin-dva-hmr实现components、routes和models的热编译

三、Ant Design Mobile

一个基于Preact/React/React Native的UI组件库

四、umi

umi，中文可发音为乌米，是可扩展的企业级前端应用框架。umi以路由为基础，同时支持配置式路由和约定式路由，以保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

特点：

可扩展：umi实现了完整的生命周期，并使其插件化，umi内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。

开箱即用：umi内置了路由、构建、部署、测试等，仅需要一个依赖即可上手开发。并且还提供针对react的插件集，内涵丰富的功能，可满足日常80%的开发需求

企业级：经蚂蚁内部3000+项目以及阿里、优酷、网易、飞猪等公司验证，值得信赖

大量自研：包含微前端、组件打包、文档工具、请求库、hooks库、数据流等，满足日常项目的周边需求

完备路由：同时支持约定式路由和配置式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等

面向未来：

 

 

 图解：

1、state 保存整个应用状态

2、view React组件构成的视图层

3、Action 描述事件

4、connect() 绑定state到view

5、dispatch() 发送action到state