一、简介

相对于vue,在react中很多东西需要自己去构建,比如网络请求、路由、redux、导航条,如果直接写会产生大量重复代码,并且后期难以维护,通过封装,将以上提到的功能封装成一个个文件夹,需要添加或修改直接去对应的地方找即可,维护成本会降低很多。

二、准备

1、全局安装

npm install -g create-react-app  

2、创建一个react项目(eact-demo为项目名)

create-react-app react-demo

3、进入项目目录安装需要的的插件

npm i react-router-dom@5.3.0 -s

npm i react-router@6.0.2 -s

npm i axios

npm i react-redux@5.1.2 -s

安装移动端第三方插件库antd-mobile(自定义navbar中间和右边点击事件用到,写项目时也可能会用到)

npm install --save antd-mobile@next

package.json相关配置截图:

 

4、npm start 运行项目

5、在项目过程中也许会需要其他插件,比如轮播图之类的,用到的时候再下载

三、项目结构介绍

src

--components

存放公共组件,初始时有公共组件和navbar、tabbar组件,common可以管理navbar和tabbar

common.js

1、导入相关文件

2、使用到的生命周期函数

3、生命周期中使用到的函数

 4、navbar中间和右边点击事件触发的函数

5、render函数 6、导出

 navbar.js

 tabbar.js

 --network

网络请求相关配置

config.js

项目相关网络请求在这里写,以elm项目首页的轮播图内容的网络请求为例,其中可以设置uncache:true不缓存,写在home里面和request同级的位置

network.js

 --pages

 根据需要写相应的内容,页面独有的组件可以直接在页面下新建文件夹(最好叫components见名知意),结构清晰

--router

index.js(有点多不好说,直接粘代码吧)

1、导入相关文件

 2、创建路由管理对象

 

 metas.js(代码省略)

定义对象存储路由元信息,定义函数处理路由元信息,分当前路由和子级路由

 routes.js

完成路由的配置

第一步导入组件,第二步创建routes数组,一个元素是一个路由,包括路径path、组件component、meta元信息

比如:

 如果有子级路由: 

 --static

存放静态资源,这里放的是阿里图标,阿里图标也可以在线引入更方便,本地加载快一点

--store

全局状态管理

index.js(代码省略)

创建全局状态管理对象

该对象存在以下两个功能

1、负责对外提供全局状态数据

2、负责根据挂载的reducer完成对state状态数据的更改

mapFunction.js

 构建辅助函数,用来完成state和组件props的绑定,同时完成dispatch和组件props的绑定

 store.js

创建stores对象存放state、mutations、和actions

--App.json存放tabbar数据,可根据需要修改

 补充:在app.js和index.js中代码有少量修改和添加,主要是导入和绑定一些东西

四、项目效果

一级页面有tabbar,二级页面没有,navbar不管一级二级都有,但是navbar不够灵活,中间和右边的内容应该根据页面的不同发生改变,这个功能暂时没有实现

图一:首页(一级页面),

图二:分类页(一级页面)点击分类1(显示二级页面),(细节:点击分类后刷新,tabbar高亮仍然在分类的位置上)

图三:点击标题(可根据需要定义函数相关内容)

(点击navbar左边返回上一级)

 

 五、总结

在这个架构中方便了网络请求、路由、navbar和tabbar、redux的管理,对于redux、路由不太理解,必须对基础知识点非常了解才可以完成这样的构建,每天看一看加深理解。

像tabbar、navbar这种东西其实已经有好用的第三方,但是想改一些东西比较困难,自己封装自己清楚,可根据需要灵活修改,如果能力够的话可以封装,用着更顺手。

 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐