React 代码规范参考

        当下各种代码规范工具如eslint、prettier等已经极大地改善了团队开发项目的代码质量，不同项目中也有不同的代码规范检查规则，比如行末加不加分号、tab键入2格还是4格等等。然而这些规范大多数只是对代码进行单行检查，无法对整个代码文件进行规范化（或许有这种规则但我不知道，或许未来会有更强的规范工具）

        但是代码的整体规范同样重要，使用react以来，老王公司的项目个个儿都是使用了eslint+prettier的，而且每一行代码都能明白是干什么的，但是面对很多代码也还是看着想吐。以下规范仅作为老王约束自己的一套规范方法，对读者仅作参考。

代码组成

对于一个tsx组件代码，以下几个部分是最基础的，老王的代码规范也是在此基础上进行的。

 import React from 'react'
 ​
 interface Props {
   param1: string
   param2: string
   fun1: () => void
 }
 ​
 const Index: React.FC<Props> = (props) => {
   return (
     <div>
       <p>这是一个使用代码片段创建的基础页面</p>
     </div>
   )
 }
 export default Index

        但是组件不可能只有这些部分，或者说只有几部分的代码也没什么好规范的，反正一眼懂。而让老王倒胃口的往往是：大量的静态变量、状态变量、方法、钩子、DOM元素，让老王更加想吐的是这些代码相互穿插。

        很多人会将代码中的内容按照功能模块进行划分，比如页面中有一个表单、一个列表、一个弹窗，则将表单的数据、状态、钩子、方法、DOM元素等放到一块，将列表用到的的数据、状态、钩子、方法、DOM元素等放到另一块，弹窗同理。这也是一种划分方法，乃至老王刚工作时也是采用这种方法，但是在工作一段时间发现这并不能提高我的工作效率（这个存在个体差异，我更倾向于将代码按照代码的样子进行划分）。

        按照老王的划分，代码分为以下几个部分：

• 外部引入：无需多说，import ....

• 静态类型：接口、枚举、声明、辅助类等，包括interface Props

• 静态数据：如初始化数据、默认数据等

• 静态方法：无需多说，就是一个普通的方法，静态的意思是指方法内不依赖组件内的状态和方法

• 状态变量：使用useState、useRef等初始化的状态变量

• 钩子：将钩子放到一起太赞了，一眼就能看出代码用了几个useEffect，

• 内部方法：区别于静态方法，内部方法会使用到组件的状态（为了降低理解难度，最好在命名上将方法进一步划分为事件方法和辅助方法）

  • 事件方法：直接用于组件事件的方法，命名为handleXXX，比如handleFormChange、handleSubmit

  • 辅助方法：区别于事件方法的其他方法

• DOM方法：方法返回一个DOM节点

组成部分顺序规范化

老王希望的代码是有序的、和谐的，话不多说，结构如下：

import React from 'react'
 // **********************************************************
 //                     这个位置统一放置外部引入
 // **********************************************************
 ​
 ​
 // **********************************************************
 //     这个位置统一放置接口、枚举、辅助类等，包括interface Props
 // **********************************************************
 interface Props {
   param1: string
   param2: string
   fun1: () => void
 }
 ​
 ​
 // **********************************************************
 //       这个位置方式统一放置静态数据，比如初始化数据、默认数据等
 // 注意如果有类似columnOptions的配置数据，尽量放一个单独的配置文件中，如index.options.ts
 // **********************************************************
 ​
 ​
 const Index: React.FC<Props> = (props) => {
   const {param1, param2, fun1} from props
   // **************************************************************
   // 这个位置统一放置组件用到的所有状态变量，包括useState、useRef等
   // **************************************************************
   
   
   // **************************************************************
   // 这个位置统一放置组件用到的所有钩子，如useEffect等
   // **************************************************************
   
   
   // **************************************************************
   // 这个位置统一放置用到的辅助方法
   // **************************************************************
   
   
   // **************************************************************
   // 统一放置事件方法
   // **************************************************************
   
   
   // **************************************************************
   // 这个位置统一放置所有的DOM方法
   // **************************************************************
   return (
     <div>
       <p>这是一个使用代码片段创建的基础页面</p>
     </div>
   )
 }
 export default Index