React(Hooks) 项目分层

最新推荐文章于 2024-07-22 00:33:06 发布

山茶树和葡萄树

最新推荐文章于 2024-07-22 00:33:06 发布

阅读量1k

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/xianghongai/article/details/106761667

版权

本文探讨了React项目中使用Hooks时的文件结构组织，提出了按业务功能和文件类型划分的原则。文章通过实例代码展示了如何处理公用状态，并讨论了复杂需求下组件的拆装。作者强调React的本质，指出现代React开发需要自行处理数据、逻辑和视图的分层，建议采用模块化方式实现Component、Logic和Presentation分层。此外，文章还涉及了接口设计，提倡后端接口以最小粒度提供数据，并按资源和性质组合。

摘要由CSDN通过智能技术生成

一、先上示例代码：

按业务功能优先、文件类型其次原则来组织项目文件结构。

- src
	- helpers
    - components  # 类型，没有数据状态、或完全内部数据状态封闭的组件，能独立、能复用
        + LineChart
        + BarChart
        + PieChart
    - views       # 业务，调用组件组装成一个个页面，不能复用，可给组件分发数据状态
        + Report
        + Document
        + Dashbord
        - Resources
            - index.jsx
            - List
                - index.jsx
                - useController.jsx                
                - service.jsx
            - Detail
                - index.jsx
                - useController.jsx
                - service.jsx

// service.jsx

// Service 层
// + 负责声明数据请求，只是声明，并未执行
// + 处理数据
import api from '../../helpers/api';

export default class ResourceService {
   
	constructor(){
   }
	
	async getResource (requestData) {
   
		const url = 'api/getResource'; 
		const response = await api.get(url, requestData