2018年12月24号入职一家新公司,第一次接触到react,一脸懵逼,经过一周的时间,熟悉了项目结构,router,models,services,pages,components
介绍
在官网中获取下载地址,通过 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project,将官网demo复制然后npm install 初始化,安装node-modules,npm start,可以通过http://localhost:8000访问该项目。
路由:
在config文件夹中的router.config.js中配置了pages下面的页面路由的嵌套
pages和components:
在pages中新建的页面,可以用单独的一个文件夹包含,也可以直接在pages的下一层新建,对应的有less和js文件,less是样式文件,js是逻辑和展示页,如果需要额外添加组件,组件可以在components中写好,在pages下面的页面中引入
service和models:
在src下面的service新建一个js文件,在文件中引入request.js(在src中->utils->request),如下写的代码
在models文件夹中新建一个对应的js文件,引入上面service中的js文件
export default {
namespace:××× //这里的namespace是整个项目的唯一,不可以有重复
state:{
//定义变量可以在全局访问
},
effects:{
//通过后台请求获取所需数据
},
reducers:{
//修改state变量的方法
}
}
在需要请求的页面使用dispatch({
type:'namesapce的命名/在models中的方法名',
payload:{
//所带参数
}
})
前提是在这个页面还需引入connect,注入需要使用的models中的js名称,如果models中的是user.js,在改页面应该这样写
要是想直接使用models中的state的变量,在connect中注入的name之前加...,如:...user
{this.props.userInfo}