admin 管理员组

文章数量: 887021

通用

适用范围

组件，hooks，工具函数，style等

优势劣势 

优势：

        1、从数据耦合和使用频率上，规范性约定组件通用上浮机制，方便后续形成自动化

        2、统一引入入口，减少后续组件上浮后整体项目的改造成本

劣势：

        1、统一入口后，若组件过多，可能会导致入口文件的引用数量过多

阶段划分

阶段通过文件夹进行定义：

阶段名称

使用次数

数据解耦

说明

rc1-common

多处复用

通过props传递

自可用状态，复用性已验证，可提取出作为npm包独立使用

rc2-common-candi

仅1处

通过props传递

自可用状态，暂时未确认复用性优劣，待后续验证

rc3-biz

多处复用

依赖全局数据

复用性被验证，但需要考虑对全局数据的解耦

rc4-biz-candi

仅1处

依赖全局数据

暂时未确认复用性优劣，待后续验证。需要考虑对全局数据的解耦

dep-[类型]

仅1处

依赖局部数据

不可自用装态，高耦合于业务模块数据，如store数据

文件命名：dep-[类型]，如 dep-components，dep-hooks

文件目录

以组件为例

├──src
│   ├──components
│   │   ├──rc1-common
│   │   │   └──button
│   │   ├──rc2-common-candi
│   │   │   └──table
│   │   ├──rc3-biz
│   │   ├──rc3-biz-candi
│   │   └──index.tsx
│   ├──modules
│   │   ├──plan
│   │   │   ├──dep-components
│   │   │   │   └──table

index.tsx内容，约定所有通用的统一入口，方便后续进行通用性的提升。

export {default as Button} from './rc1-common/button';
export {default as Table} from './rc2-common-candi/table';

针对组件的使用，页面A文件

import {Button} from '@components/index';const A = () => {return (<Button/>)
}

FAQ

1、rc1-common依赖rc1-common-candi，如何处理？

将rc1-common-candi提升为rc1-common

2、多处使用dep，如何处理？

将dep提升为rc3-biz

 

本文标签： 通用

版权声明：本文标题：通用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1699127913h331270.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。