React中的dav

最新推荐文章于 2024-11-08 10:12:47 发布

2401_84153285

最新推荐文章于 2024-11-08 10:12:47 发布

阅读量1k

点赞数 21

分类专栏：程序员文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/2401_84153285/article/details/138805188

版权

程序员专栏收录该内容

171 篇文章

订阅专栏




[]( )创建新应用

------------------------------------------------------------------



安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令（不能访问？）。现在，你可以通过 dva new 创建新应用。

dva new dva-app




[]( )Dav目录

------------------------------------------------------------------



安装完成之后，能看到项目结构

├── mock // mock数据文件夹

├── node_modules // 第三方的依赖

├── public // 存放公共public文件的文件夹

├── src // 最重要的文件夹，编写代码都在这个文件夹下

│ ├── assets // 可以放图片等公共资源

│ ├── components // 就是react中的木偶组件

│ ├── models // dva最重要的文件夹，所有的数据交互及逻辑都写在这里

│ ├── routes // 就是react中的pages

│ ├── services // 放请求借口方法的文件夹

│ ├── utils // 自己的工具方法可以放在这边

│ ├── index.css // 入口文件样式

│ ├── index.js // 入口文件

│ └── router.js // 项目的路由文件

├── .eslintrc // bower安装目录的配置

├── .editorconfig // 保证代码在不同编辑器可视化的工具

├── .gitignore // git上传时忽略的文件

├── .roadhogrc.js // 项目的配置文件，配置接口转发，css_module等都在这边。

├── .roadhogrc.mock.js // 项目的配置文件

└── package.json // 当前整一个项目的依赖




然后在项目根目录输入 npm start 启动项目，可以看到下面的页面  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201116214402665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70#pic_center)



[]( )使用 antd

--------------------------------------------------------------------



通过 npm 安装 antd 和 babel-plugin-import 。

npm install antd babel-plugin-import --save




**注意!!!**



请在全局目录下找到 .webpackrc 文件，输入以下代码，使 babel-plugin-import 插件生效。

{

“extraBabelPlugins”: [
[“import”, { “libraryName”: “antd”, “libraryDirectory”: “es”, “style”: “css” }]
]

}




[]( )定义路由

-----------------------------------------------------------------



我们通过import引入指定页面，在Route标签中引入。

import React from ‘react’;

import { Router, Route, Switch } from ‘dva/router’;

import IndexPage from ‘./routes/IndexPage’;

function RouterConfig({ history }) {

return (

<Router history={history}>

  <Switch>

    <Route path="/" exact component={IndexPage} />

  </Switch>

</Router>

);

}

export default RouterConfig;




[]( )编写 UI Component

----------------------------------------------------------------------------



一般为我们创建出来的公共组件。



[]( )定义 Model

---------------------------------------------------------------------



完成 UI 后，现在开始处理数据和逻辑。



dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

export default {

namespace: ‘example’,

state: {},

reducers: {

save(state, action) {

  return { ...state, ...action.payload };

},

effects: {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！