React项目针对目录结构的改造

最新推荐文章于 2024-06-27 11:01:26 发布

qq499576783

最新推荐文章于 2024-06-27 11:01:26 发布

阅读量5.4k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq499576783/article/details/79455523

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端技术 React.js + antd + css

进行目录结构上的改造，React项目使用create-react-app生成

src下的原目录结构：

|——components  #组件
     |——Bar  #导航栏、操作栏等
     |——Content  #内容展示
     |——DataEntry  #数据输入组件
     |——FeedBack  #模态框、气泡等反馈组件
     |——Menu  #菜单组件
     |——Mobile  #手机端组件
     |——utils  #工具组件   
|——pages  #页面
     |——MobilePage  #手机页面
|——index.js
|——index.css
|——route.js  #路由

针对原目录改进了以下几个问题：

1. 手机、PC端彻底分开，原目录以PC为主，手机调用部分PC的组件，现完全拆分成两个目录

2. 数据与界面未分层，增加service目录

3. 通用的工具与css放入的目录较深，不方便其他组件调用，现置于一级目录

改进后的目录结构为：

|——components
     |——pc
     |——mobile
     |——common
|——pages
     |——pc
     |——mobile
|——service
|——utils
|——css
|——index.js
|——index.css
|——route.js

由于项目手机端功能要求不高，使用pc端的部分组件与功能，因此未将手机端完全拆分出来。

后续项目改造方向：

1. 目前使用css写样式，大量重复，后续使用less代替css进行样式的开发。

2. 未使用Redux作状态管理，组件之间状态信息混乱，后续使用mobx进行状态管理(待定，由于React 16.3 alpha版本引入Context API)

改进后的技术为 React.js + antd + less + mobx