React文件名和目录规范最佳实践记录(总结篇)
React在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范。
文件类型
介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能。
- component 组件文件
- page 如果有路由(React Router、NextJS等)，则有页面文件
- util 需要复用的工具函数
- helper 一段特定逻辑，不是通用工具，可复用也可仅作为代码拆分片段
- hook 自定义React Hook
- constant 定义常量，大写+下划线命名
CONSTANT_VALUE
处理index文件
在做组件或者页面的时候，你可能会划分组件，并把主组件用index.tsx导出。这样做的时候有一个好处就是可以按照文件夹名引入，从结构上看是很清晰的。
但是事实上，在编辑器中会有多个index.tsx文件，开发时需要看文件所在的文件夹，非常难受。
我的解决方案是，你的主组件应该和原来一样导出，index.ts 文件二次导出主组件。
你的 index.ts 应该这样写：
export * from './MainComponent';
export { default } from './MainComponent';虽然把一个文件变成了两个文件，但是有效地减少了开发时的心智负担。
接下来规范中所有的
index.ts都是这个作用
规范
类型文件夹
这应该是一个比较官方的规范，很多项目都在使用。
此处使用大驼峰命名组件（component）和页面（page），其他文件通常用小驼峰
如果你有路由，那么此时component中的组件应为通用组件。
src/ ├── components/ │ ├── MyHeader.tsx │ └── MyFooter.tsx ├── pages/ │ ├── Home.tsx │ ├── About.tsx │ └── Widget/ │ ├── components/ │ │ ├── Tool.tsx │ │ └── Option.tsx │ ├── helpers/ │ │ └── setOptionStorage.ts │ ├── Widget.tsx │ └── index.ts ├── hooks/ │ └── useTheme.ts ├── utils/ │ └── getRamdomNumber.ts └── constants.ts
这个规范在小项目中尚可实行。但是如果相对复杂的项目，由于文件夹层数多，会导致引入混乱。接下来会推荐特性分类的规范。
示例项目：Ant Design Pro
特性文件夹
特性文件夹分类很好地解决了层数过多的问题，增加平铺的可能。并更直观地展示了代码逻辑，方便维护。
大驼峰命名
这种命名规范中，除了组件和页面以外，所有的文件都需要添加类型后缀。
并且在一个特性中，可以将类型相同的函数放在一个文件内。
例如 Widget.helper.ts Widget.util.ts
如果是通用的或复用的代码，都建议放到 common 文件夹统一管理，其余特性文件夹均大写。
非组件或页面的独立的文件，请使用烧烤串命名（中划线分割）
同一个特性的组件可以不另设 components 文件夹
src/
├── common/
│ ├── components/
│ │ ├── MyHeader.tsx
│ │ └── MyFooter.tsx
│ ├── utils/
│ │ └── get-random-number.util.ts
│ ├── hooks/
│ │ └── use-theme.hook.ts
│ └── constants.ts
├── Home/
│ └── Home.tsx
├── Widget/
│ ├── Tool.tsx
│ ├── Option.tsx
│ ├── Widget.helpers.ts
│ ├── Widget.utils.ts
│ ├── Widget.constants.ts
│ ├── Widget.tsx
│ └── index.ts
└── About/
└── About.tsx参考文章：Delightful React File/Directory Structure
烧烤串命名
这个实际上是参考了Angular规范，如果你对上面这个规范的大小写命名强迫症，不妨试试这个更严苛的规范。
- 所有文件名、文件夹名都小写，使用烧烤串命名（中划线分割）。
- 所有的文件都需要添加类型后缀。
- 只有主要的页面组件可以放在特性文件夹底层，其余文件都需要在特性文件夹中再设置类型文件夹。
- 每个函数都应该是一个文件，不要把相同功能的函数放在一个文件内。
- 移除
index.ts导出，因为文件名变长且有类型后缀，引入方便判断类型
src/
├── common/
│ ├── components/
│ │ ├── my-header.component.tsx
│ │ └── my-footer.component.tsx
│ ├── utils/
│ │ └── get-random-number.util.ts
│ ├── hooks/
│ │ └── use-theme.hook.ts
│ └── constants.ts
├── home/
│ └── home.page.tsx
├── widget/
│ ├── components/
│ │ ├── tool.component.tsx
│ │ └── option.component.tsx
│ ├── helpers/
│ │ └── set-option-storage.helper.ts
│ └── widget.page.tsx
└── about/
└── about.page.tsx到此这篇关于几种React文件名和目录规范最佳实践的文章就介绍到这了,更多相关React文件名和目录实践内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React-Native之TextInput组件的设置以及如何获取输入框的内容
这篇文章主要介绍了React-Native之TextInput组件的设置以及如何获取输入框的内容问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
React Native中WebView与html双向通信遇到的坑
这篇文章主要介绍了React Native中WebView与html双向通信的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
路由的配置文件目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的，路由的参数传递有二种方式这，两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用，本文通过示例代码详解讲解，需要的朋友参考下吧2022-11-11
React.memo为高阶组件。它与React.PureComponent 非常相似，但它适用于函数组件，但不适用于class组件。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-10-10
使用React+SpringBoot开发一个协同编辑的表格文档实现步骤
随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求,本文小编就将为大家介绍如何使用React+SpringBoot简单的开发一个协同编辑的表格文档,感兴趣的朋友一起看看吧2023-11-11
react项目打包后点击index.html页面出现空白的问题
这篇文章主要介绍了react项目打包后点击index.html页面出现空白的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
react中useState使用:如何实现在当前表格直接更改数据
这篇文章主要介绍了react中useState的使用:如何实现在当前表格直接更改数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程（安卓部分）为例，给大家分析 React Native 的启动流程，需要的朋友可以参考下2021-08-08
在业务中,需要在一个卡片组件中展示多个标签,标签组件高度相同,宽度和出现顺序不同,要求标签只能在有限的空间内展示,所以本文给大家介绍了React实现多标签在有限空间内展示,需要的朋友可以参考下2023-12-12
Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解
今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能，前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-06-06
最新评论