本文主要是介绍通用 - 上浮模式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
适用范围
组件，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
这篇关于通用 - 上浮模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
