react使用umi创建
文章目录
- umi的创建：
- 路由切换
- 传参
- 路由嵌套
- config
- umi和antd的合作使用：
- 结合dva使用：
- dva的使用：
umi可插拔的企业级反应应用程序框架
umi的创建：
先新建一个目录（这里起名projects），进入projects文件夹里，创建src文件夹，如果想要在src下构建一些页面或组件，你的终端必须在src里边打开，如果在外层projects里打开，他会直接在你的projects目录里去自动生成一个page的文件目录，以及你想要生成的组件的js文件，所以我们要在src生成，进入到src里边，启动终端，要是启动文件的话在外层不影响启动。只要umi -g的环境装过了，装完之后就可以直接来使用，创建个首页，umi g page index，这个时候你创建的文件或组件就会展示到目录中，umi里创建的组件都默认为无状态组件，如图所示：
他也可以使用有状态组件（稍后用到再说）。还需要一个页面时还是使用umi g page user（文件名，自己看着起），创建完成后目录中会多出两个文件，想要看一下效果的话，可以输入umi dev，成功后会显示一个网址，打开浏览器输入网址，就可以看到效果，如图所示：
想看user文件的话，在路径后加/user即可。在创建个list文件，如果创建的页面多的话需要重新启动一下umi。这里list不写无状态组件，写成类名定义的；同样需要绑定react：import React，｛Component｝ from ‘react’；按照正常的react语法来写，写个class类，如图：
先简单的写一下，同时将这儿组件暴露出去。
路由切换
如果你的这些页面经过路由的切换，需要通过导航标签来进行跳转，它提供了一个叫link的标签或link对象，可以进行一个路径的切换，把link导过来，这直接是一个对象，这个对象来自umi下的link模块，link里有一个to属性，实现跳转路径，如图：
传参
有跳转切换，一定会有传参，
如图所示传参方式为params传参，但是跳转会报错，接下来解决这个问题。
先再创建一个detail组件吧，在index里配置
想要实现正常跳转，需要在pages下新建一个detail目录，和路径名一样，然后把detail相关的文件放到detail文件夹里边，这代表detail里边有参数，然后把detail.js重命名，如果是params传参，命名为$+你要保存参数的变量名称，如果你传了个1，这个变量你要用什么变量来保存，一般我们都叫做id，这代表是params传参，我们要接收参数显示的视图组件，参数变量就是id，前面一定要把$声明上去，我们可以在$id.js里进行参数的接收，接收方式如图所示：
如果文件新增或者文件修改了，一定要重新启动一下。
如果是query传参，传参方式为：
query接收方式：不再是$声明，detail文件目录还是作为路由路径，一个文件夹里边有一个显示页面视图的主文件，我们一般命名为index.js，在这个文件里定义我们的function组件，创建方式和接收参数方式如图所示：
state传参和query一样，只需要将query换成state即可。
路由嵌套
同时对于我们当前一个路由文件下的根组件如何来写嵌套，因为我们默认所有pages里边，不管是文件目录还是外层的一些主文件，他都是共用一个视图容器，如何在某个页面里边显示一个嵌套，根据umi提供的文件目录，它提供了一个layouts，他可以作为一个全局目录，也可以在我们当前每个页面里边作为一个嵌套目录来进行使用，如果你需要把detail里的index组件当成谁的组件的子组件，嵌套起来，在他里边进行展示，这个时候你在detail里边新建一个组件，这个组件命名必须叫做_layout.js，不能改，layout存在的目的就是作为当前某一个组件的根组件，其他这些index啥的是需要放在_layout组件里边来展示的，相当于是他的一个子组件，也可以是用来做嵌套的路由操作，就是把index里的东西都放到_layout里边，加载的时候加载的是layout里的东西。这个layout怎么来写，也是定义一个组件，代码如下：
加载显示的时候只显示layout这个容器，说明在当前/detail路径下加载的父组件就是这个detail，如果需要让这个index当成这个detail的某一个子容器来展示出来，也就是他的一个子路由规则展示，你需要在layout里给他一个子容器，这个容器来加载index，如果是params传参的话，就是加载$id，写法如下：
他的整个结构里边pages里除了我们正常写的js文件以外，还有一个document.ejs，他是一个通用的html模版，我们按照他文件约定的目录来构建一个document.ejs文件，在项目的pages里边，document.ejs文件里边写的是html整个通用全局模板的一个声明定义形式，这里直接粘的京东的，如下：
添加了新文件需要重新启动，会显示一个错误，需要给body里边添加
然后在pages并列的情况下，src下有个global.css，他是约定整个umi项目里边全局的样式文件，自动引入，也可以使用less，名称不能改，都叫做global。
现在在项目里新建global.css，全局样式写在这里即可，标签名、类名都可以。
config
我们还能用到的是config下的config.js，这个文件存在的目的和.umirc.js存在的目的一样，都是整个umi的配置文件，他俩只能有一个，用.umirc时就不要用config.js，用config.js就不要再用.umirc了，所以这两个只能选择一个，这个配置文件能够让我们很好的使用第三方的工具和插件。
umi和antd的合作使用：
需要先安装个依赖，
然后构建一个和src并列的config文件，里边有一个配置文件config.js，写入官方让写的代码，用什么写什么，用antd就写antd，如：
然后就可以在组件中尽情的使用antd了，我们在index里试一下，引入一个button，
使用方法：
依赖装到外层，不要装到src里。
结合dva使用：
dva可以说是一个另外一个redux，我们用过数据管理流redux、react-redux，他们两个要配合使用，针对我们当前无状态组件，那对于我们现在生成的这个umi里边的组件来说都是无状态组件，所以dva也是默认集成了redux和react-redux这样的两个数据流框架的一些API语法，在这里边就是用来管理整个umi里边所有无状态组件之间数据的交互展示。
dva的使用：
首先需要在config.js中加一条配置，叫做dva，设为true，代表这个项目要用dva。这个文件算是完成，再来看umi文件目录，他的目录里边少了一个models，然后翻到使用umi与dva，翻到模型注册，了解一下文档。这里以全局模型为例，我们在src目录下，和pages并列，构建一个models的文件目录，不能改，这是它约定目录里少了一个名称（做笔记可以记下来），其实model是全局模型用来管理我们dva的一些数据的，名称叫models，不能更改，这里边填的是，你的数据流模型叫什么名字，你就去起一个js文件，这里以info为例，简单的来写个info.js，这里边写什么，暴露出来一组数据对象，在这个对象里边你必须要先写一个namespace，这个叫命名空间，一般我们一个模型js文件他的命名空间尽量和他的文件名保持一致，这样不会重复。因为我们所有的操作将来都是要通过这个info的命名空间来拿到他里边的数据，以及他里边的一些事件行为。那关于我们整个这个模型里边包括dva里边的一些数据结构怎么来写？完全遵循一些规则（dva规范），数据放到state对象里边，数据里边有啥随便定义。我们以在index里用为例，想用数据的话，就需要props来拿，然后怎么用要取决于当前你这个组件生成的容器组件怎么来定义info命名空间里的这个state数据的，那么，在这里边，我们要把UI组件生成容器组件咱们要结合一个connect方法，这个connect是dva提供的，这个时候不要在暴露函数了，我们暴露的是容器组件，代码如图所示：
这样就拿到了state，这样props就相当于state对象，写的时候直接props.属性名即可，这样就可以显示出来了。然后，这里边的数据可能要变一下，比如说，我这里的按钮改为设置年龄，当我点击按钮的时候，让年龄变成18，也就是说我要改变当前state里的数据，修改数据怎么来改，因为现在做的都是同步操作，在这个整个数据模型对象里边还提供了一个处理state的方法，叫做reducers，所有在这里边处理数据都是同步的一个操作，在这个reducers里边的每一个函数都有两个参数，state，返回的状态值，payload指的是我们传递过来的一个参数，他的本质是一个对象的形式，在这里边相当于咱们之前用的reducer里边的那个dispatch接过来的数据，咱们是type类型以及我们的一个text值，在这里边是type类型以及我们的payload对象形式的一个传递数据，所以这一块稍微改了一下，其他基本不变，回到info.js里边，我们加上reducers，比如我们给一个change的方法，代码如下：
至于年龄的修改，我们放在组件标签的业务逻辑里边来进行实现，我们先给按钮绑定onClick，写法代码如下：
如果现在让他的年龄点一下减1，写法如下：
所以这个是我们当前的这个dva里边关于state数据的同步更改，通过reducers。
如果需要做异步，使用的是effects，同时异步里边还有一个定义形式，所有的异步方法前面必须加*，这是特殊的一个定义形式，代表异步的，处理异步的，同时还有一个新对象叫做yield，这个yield对象是干嘛的？在我们整个effects声明的异步函数里边，除了payload是我们接收过来的参数，还有一个对象，叫call和put，这两个东西都和我们的yield相关，yield他是表示后面的方法执行完以后，在执行下一步的一个操作，那同样的call和put，call表示调用一个api接口，执行一些异步接口的操作，put表示派发我们的某一个数据，响应的一个数据给他派发出来，所以yield后方我们要跟的就是put以及call两个方法，咱这里边来简单看一下，咱们的axios请求都是一个异步的操作，比如说我们就做一个axios请求，我在这准备一个数据叫list，待会把我axios请求过来的数据就放在这个list里边来存放一下，然后接下来我们这里边要用axios的交互，但是现在项目里边没有，需要安装依赖，然后接下来去声明一个异步的函数，我们在src里边构建一个api文件夹，里边放置一个index.js，代码如下：
api里的index就先写到这里，然后在构建一个数据请求的js文件，这里叫做getpto.js，代码如下：
暂时方法写到这，后期有什么方法都可以继续封装，这个方法定义完之后，我们回到model里边，咱们关于数据的axios请求肯定都是异步的，我们在这里添加一个虚拟键值对叫做effects，在这里边定义的所有函数前面必须要加*，比如说获取数据，这里叫做getData，这可以自己去定义，里边的第一个参数叫做payload，指的是我们当前传递的一个数据参数，第二个是一个对象，call以及我们的put，这跟yield相关，这里边的代码参考如下：
接下来我们说怎么来用，代码参考如下：
我们请求成功后数据返回给了list，list又是props的属性，这里就可以直接props.list来使用，展示list里的内容写法如下：
以上是 react使用umi创建 的全部内容， 来源链接： utcz.com/z/383420.html
