react架构

一、简介

相对于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这种东西其实已经有好用的第三方，但是想改一些东西比较困难，自己封装自己清楚，可根据需要灵活修改，如果能力够的话可以封装，用着更顺手。