本文适合学习React开发的初学者。使用该框架，方便后期使用antdPro框架开发更复杂的前端页面。第一步：搭建umi的基础框架。项目运行yarnstart命令，在浏览器中可以看到如图所示的界面。完成上述操作后出现问题。项目默认使用ts和ReactHooks。对新手不是很友好。没有引入dva.js。第二步：引入dva.js1。首先找到.umirc.ts文件，在配置中添加如下配置dva：{immer:true,hmr:false,},2.在src文件夹下创建models文件夹，然后在pages文件夹下创建Demo1文件夹，并在Demo1文件夹下创建models文件夹。创建完成后如下图所示，更详细的说明请参考dva配置步骤三：使用类组件编写新页面。函数组件和Class组件请参考React官方文档：React组件说明在src/pages/Demo1文件夹下创建一个index.js文件（上面创建），其基本代码如下：importReact,{来自“反应”的片段}；类演示扩展React.PureComponent{构造函数（道具）{超级（道具）;}render(){console.log(this.props);return(首页
)}}exportdefaultDemo;第四步：定义dva模型并建立连接在src/pages/Demo1/models中创建文件DemoModels.jsfileexportdefault{namespace:'basicDataModel',state:{data:[{text:1,value:2},],},效果：{}，reducers：{save(state,action){return{...state,...action.payload,};},},};输入上面的代码创建一个名为basicDataModel的模型，然后在Step3创建的index.js中输入下面的代码与模型建立连接@connect(({basicDataModel})=>({basicDataModel,}))classDemoextendsReact.PureComponent{注意@connect一定要写在类的前面进行函数装饰，在index.js的render函数中输入如下代码打印出basicDataModel的console.log(this.props)即可在this.props中访问；第五步：完整的umi配置（在.umirc.ts文件夹下配置），参考import{defineConfig}from'umi';exportdefaultdefineConfig({nodeModulesTransform:{type:'none',},routes:[{路径：'/'，组件：'@/pages/index'}，]]，dva：{immer：true，hmr：false，}，ignoreMomentLocale：true，hash：true，目标：{ie：9，}，fastRefresh:{},});脚手架的git地址
