系列引言
最近想把团队组件开发规范下，达到写法规整、方便迁移复用维护、提升代码质量，在网上看了不少好文章。特归纳总结下要点，便于参照。如有侵权，联系后处理～
组件开发
开发规范
-
文件组织
src/
components/ # 🔴 项目通用的‘展示组件’
Button/
index.tsx # 组件的入口, 导出组件
Groups.tsx # 子组件
style.css # 组件样式
...
index.ts # 到处所有组件
containers/ # 🔴 包含'容器组件'和'页面组件'
LoginPage/ # 页面组件, 例如登录
components/ # 页面级别展示组件，这些组件不能复用与其他页面组件。
Button.tsx # 组件未必是一个目录形式，对于一个简单组件可以是一个单文件形式. 但还是推荐使用目录，方便扩展
Panel.tsx
reducer.ts # redux reduces
useLogin.ts # (可选)放置'逻辑', 按照👆分离逻辑和视图的原则，将逻辑、状态处理抽取到hook文件
types.ts # typescript 类型声明
style.css
message.ts
constants.ts
index.tsx
HomePage/
...
index.tsx # 🔴应用根组件
hooks/ # 🔴可复用的hook
useList.ts
usePromise.ts
...
serves/ # 🔴菜单功能模块为组织单位的请求服务配置，方便维护
useList.ts
usePromise.ts
...
index.tsx # 应用入口, 在这里使用ReactDOM对跟组件进行渲染
stores.ts # redux stores
contants.ts # 全局常量
- 组件及页面名称统一首字母大写驼峰式命名，其余首字母小写驼峰式命名
- 单个文件限制一般不能超过300行，超过 300 行则说明需要对这个组件进进一步拆分
-
一个模块/目录应该由一个‘出口index’文件来统一管理模块的导出，限定模块的可见性
-
组件依赖引入顺序：全局绝对路径 》 公共组件 》 本模块组件 》 公共方法 》 本模块方法 》 服务 》 样式
-
工具方法要按需引入，不要直接引入全部，例如
import * as _ from '*****'
-
组件开发
公共方法封装
-
写清楚方法说明，使用场景、入参格式、处理结果
-
公共方法超过两个入参用对象传入，方法中有默认值，对传入值进行类型校验
代码提交
说明commit内容的类型
- feat：新功能（feature）
- fix：修补bug
- docs：文档（documentation）
- style： 格式（不影响代码运行的变动）
- refactor：重构（即不是新增功能，也不是修改bug的代码变动）
- test：增加测试
- chore：构建过程或辅助工具的变动
- revert: 代码回滚
- build: 影响系统构建或者外部依赖的更改（例如：glup，npm, broccoli）
- ci: 对CI配置文件和脚本的修改
- perf:性能提升
小技巧
-
如果组件不需要状态, 则使用无状态组件
-
性能上比较: 无状态函数 > 有状态函数 > class 组件
-
最小化 props(接口). 不要传递超过要求的 props
-
如果组件内部存在较多条件控制流, 这通常意味着需要对组件进行抽取
-
不要过早优化. 只要求组件在当前需求下可被复用, 然后'随机应变'
