React凤凰项目规范
技术资源
基础语法
框架
组件库
构建编译
代码校验工具
代码规范
React
基础规范
- 统一全部采用 Es6
- 定义变量使用let ,定义常量使用const, 使用ESModule、避免与CommonJS 混用。
- 每个文件只包含的一个 React 组件(联系紧密的组件可以使用「命名空间的形式」)。
- 始终使用 JSX 语法,不要使用
React.createElement
创建 ReactElement,以提高编写速度、可读性、可维护性。 - 在传递props时,如无必要,不能传递整个props,只需传递props中所需要的属性
- 在组件行内设置属性,不要在外部改变属性的值;
- 属性较多使用
{...this.props}
语法; - 重复设置属性值时,前面的值会被后面的覆盖。
- 自定义方法放在 React API 方法之后、
.render()
之前、.render()
方法始终放在最后; - 避免 this.$parent
- 谨慎使用 this.$refs
- 每个文件最好不要超过300行
- 对待修改/优化建议使用
TODO:xxx
进行高亮提示 (vscode 插件: TODO Highlight、Todo Tree)
命名规范
函数命名 (前缀为动词,名字应该明确表达函数作用)
动词 | 含义 | 举例 |
---|---|---|
can | 判断是否可以执行某个权限 | canLogin |
has | 判断是否含有某个值 | hasToken |
is | 判断是否为某个值 | isShowModel |
get | 获取某个值 | getUserId |
get | 设置某个值 | setCookie |
load | 加载某些数据 | loadList |
update | 更新某些数据 | updateUserInfo |
del | 删除某些数据 | delMenu |
on/handle | 组件内事件函数 | onRadioChange/handleCheckButton |
... | ... | ... |
扩展名:使用 .jsx/.tsx 作为 React 组件的扩展名;文件名:使用大驼峰,如 MyComponent;
组件命名:一个目录的根组件使用 index.jsx/.tsx 命名,以目录名称作为组件名称;
// bad import Footer from ‘./Footer/Footer‘; // bad import Footer from ‘./Footer/index‘; // good import Footer from ‘./Footer‘;
组件相关规范
- 组件声明:class App extends Component/PureComponent{}
- 行内迭代:使用map进行迭代、避免使用数组的index来作为属性key的值,推荐使用唯一ID
const { options } = this.props return ( <div> {options.map((data) => <Component name={data.name} key={data.id} /> )} </div> );
- 注释:组件之间的注释需要用
{}
包裹。 - 使用箭头函数进行 this 指向
// good getValue = () => {} <MyComponent onClick = { this.getValue } />
- 对于无状态组件、使用纯函数组件而非使用 Class
编写技巧
先引用外部组件库,再引用当前组件块级组件, 然后是公共函数库最后是 css 样式
import * as React from ‘react‘; import { Dropdown, Menu, Icon } from ‘antd‘; import MyComponent from ‘./MyComponent‘; import Header from ‘common/Header‘; import Styles from ‘./index.less‘;
解构
// good const { name } = this.props const { name } = this.state // bad this.props.name this.state.name
每次变更state 必须调用setState方法
//good this.setState({name:‘Lucy‘}); //bad this.state.name = ‘Lucy‘;
在State更新时,如果更新的值涉及到了state和props,调用setState时不要直接使用this.props和this.state
//good this.setState((prevState, props) => ({ name: prevState.name + props.increment })); //bad this.setState({name:this.state.name});
setState是异步的,若执行setState后需马上调用、创建回调函数
this.setState( { name: ‘Lucy‘, }, () => { // do something after state change }, );
尽量使用三目运算
//good ShowUserInfo(){ return isShowUserInfo : (<div>姓名:张三</div>) ? (<div>姓名:未填写</div>) }
自闭合标签
- JSX 中所有标签必须闭合;传递默认值为true
// good <MyComponent showName={true}/>
()
使用
- 多行的 JSX 使用
()
包裹,有组件嵌套时使用多行模式; - 单行 JSX 省略
()
。
JSX 属性使用双引号"",JS相关属性使用单引号‘‘
// bad <Foo bar=‘bar‘ /> // good <Foo bar="bar" />
变量判定
- 对所有定义的或者传入的变量,都进行默认设置或者判定是否为undefined,防止数据未定义时程序报错。
// good onChange(value => console.log(value?.name))
数据操作
- 数组与数组合并
// good const a = [1,2]; const b = [3,4]; const c = [...a,...b];
- 对象与对象合并
// good const a = {name:‘张三‘} const b = {age:32} const c = {...a,...b};
- 对象并入数组
// good const a = [{name:‘张三‘}]; const b = {name:‘Lucy‘}; const c = [...a,b];
- 数值互换
// good let a = 1; let b = 2; [a,b] = [b,a];
注释规范
文件顶部的注释,包括描述、作者、日期 (vscode 插件 vscode-fileheader)
/** * @Author: yushengyu * @description 前端代码规范 * @Date: 2020-05-28 16:18:10 * @Last Modified by: yushengyu * @Last Modified time: 2020-05-28 16:23:36 **/
以下情况需加注释
- 公共组件使用说明
- 各组件中重要函数或者类说明
- 复杂的业务逻辑处理说明
- 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
- 注释块必须以/(至少两个星号)开头/;
- 单行注释使用//
注释块
/** *@description 函数注释(做什么的) *@param {string} p1 参数1的说明 *@param {string} p2 参数2的说明,比较长 *@return 返回值描述 **/ getUserInfo(p1,p2) => { // do something return xxx }
TypeScript
使用TSLint 管理代码规范
尽量避免使用 any 定义数据类型、写好声明文件
命名
- 类型名使用 PascalCase
- 接口名前不要加 I
- 枚举值使用 PascalCase ( 建议使用
enum
进行枚举) - 函数名使用 camelCase
- 属性和局部变量名使用 camelCase
- 私有属性名不要使用 _ 前缀
- 命名时尽可能地使用全名(而非缩写)
CSS相关规范
- 使用语义化、通用的命名方式(不能使用汉语拼音);
- 尽量使用css moudles 避免样式代码冲突、建议使用驼峰方式进行命名;
- 避免选择器嵌套层级过多,尽量少于 3 级;
- 避免选择器和 Class、ID 叠加使用;
- 避免使用 !important 修改样式
- 使用 classnames 管理同一组件上的多个className
- 使用less进行样式编写、避免使用多种css处理器混用
代码提交
- 使用
commitizen
进行代码提交 commitizen - 尽量避免代码一次性提交多个变更、在完成一个组件的开发后及时进行代码提交
- 拉取分支进行需求开发、不要在master进行代码提交、master仅进行分支合并
创建umi项目
$ mkdir myapp && cd myapp $ yarn create umi
选择项目
Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. ? app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.
umi+dva 项目目录结构
- config 配置文件 -config.prod 生产环境配置 -config.dev 开发环境配置 - mock 本地mock数据 -component 一级目录 -index.js mock数据 - src 主目录 - api/services 自定义接口 - home 页面级的接口 API - index.js - assets 静态资源文件 - components 组件 公共组件 - layouts/index.js 全局布局 - models/global.js 全局store - pages 页面目录,里面的文件即路由 - .umi/ dev 临时目录,需添加到 .gitignore - .umi-production build 临时目录,会自动删除 - document.ejs HTML 模板 - 404.js 404 页面 - utils 公共方法 - global.css 约定的全局样式文件,自动引入,也可以用 global.less - global.js 可以在这里加入 polyfill
相关推荐
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04