React 函数式编程 - 代码结构

摘要：

• 一个包含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组件优雅编程我总结的点，今日摸，扣字。