摘要:
- 一个包含10个模块以上的代码算是个不小的项目了,也许接手项目的人不止一个,假如领导找你,哎,呢谁,去改一下呢谁谁的代码,快去,给你半个工作日的时间;而呢谁的代码写了几千行,看都要看半天,能改完?so,一个程序员要写出优雅的代码组件,优雅的代码结构层次多重要!!!
一个优雅的react项目,把1.组件目录结构,2.组件内部结构 保持良好的顺序逻辑,统一团队规范,就会很优雅。
一:组件目录结构
先看个例子:
注解:这个项目是我近期的一个项目,所用的是ant Pro 搭建的项目。ant Pro 也就是基于antd && umi 封装的中后台前端/设计解决方案,在这方面用着挺nice,这里不过多阐述,想了解的给你个地址:https://pro.ant.design/zh-CN/
> config #项目配置文件,这个是umi的配置。
> mock # mock数据
> src
- assets ## 静态资源
- components ## 通用组件,与项目业务无关,可被其他所有的组件调用
- models ## 这里是ant Pro约定式的状态管理文件目录,生成全局状态,创建文件写里面即可
- pages ## 页面组件,都是特定的路由页面,无复用性
- services ## 接口定义
- utils ## 工具类,所有的公共json资源,公共处理数据方法,封装的异步处理函数也在里面
- common.less ## 全局样式
注:没有列举到的都是框架结构生成的文件,是ant Pro的配置文件
当你使用原生的react的话,基本结构基本也一致:
src/
components/ (通用组件,与业务无关,可被其他所有组件调用)
containers/ (容器组件,与业务深度耦合,可被页面组件调用)
hooks/ (公共的 hooks)
pages/ (页面组件,特定的页面,无复用性)
store/ (状态管理)
services/ (接口定义)
utils/ (工具类)
二:组件内部结构
1:导入顺序
导入顺序为 node_modules
=> @/ 开头文件
=> 相对路径文件
=>utils公用函数
=>services接口
=>当前组件样式文件
比如我的这个项目中的:
总结:
// 导入 node_modules 依赖
import React from 'react';
// 导入公共组件
import SimpCard from '@/pages/components/SimpCard';
// 导入相对路径组件
import AddType from "./components/AddType";
// 导入utils公用函数
import { useAsync } from '@/utils/hooks/useAsync';
// 导入services接口Api
import * as apis from '@/services/apis/product';
// 导入对应同名的 .less 文件,命名为 styles
import styles from './index.less';
2:组件内部代码编写顺序
组件内部的顺序为 props
=> state
=> Hooks
=> 内部 function
=> 其他逻辑
=>effects
=> JSX
总结:
/**
* 组件注释(简明概要)
*/
const Eg = props => {
// 1. props => 也可以直接写函数参数内部
// 2. state
// 3. Hooks
// 4. 内部 function
// 5. 其他逻辑...
// 6. effects
return (
<div className={styles.wrap}>
</div>
);
};
3:相对路径不要超过两级
当代码多的时候,可能会出现层级很深的目录结构,你导入的时候会有很多../
这种字符
比如:
// 这里我想拿到utils公用函数中的处理保留位数,处理时间格式的的函数,需要../../才能拿到
import { formatNoneValue, formatTimeToString } from '../../utils/utils';
想要放弃这种,我们需要再项目根目录下找到jsconfig.json
或者tsconfig.json
文件
把这个改掉之后,那我们导入就可以
import { formatNoneValue, formatTimeToString } from '@/utils/utils';
4:react函数式编程,该封装咱就封装,业务组件内部能不写处理函数就不写,全部给他放到utils里面去,方便公共使用,减少业务代码的代码量
给个例子哈:
如上图:这里我是在utils里面封装的一个处理数字转大写的通用函数,看左侧ide工具的代码行数,408-308=100(行)
,这100行放到你写的业务组件中,是不是代码特备冗杂,能优雅吗?而在我这个项目中这个通用函数引用了有很多次,假如每个组件都放这100行代码,是不是也占用大包资源,影响整体性能嘞。so,我们react函数式组件,改封装的就封装,公共的函数能通用的就通用,放到utils
中你用我用大家一块用🥰。
结语
以上是写React
组件优雅编程我总结的点,今日摸🐟,扣字🤯。