基础语法
框架
组件库
构建编译
代码校验工具
基础规范
React.createElement
创建 ReactElement,以提高编写速度、可读性、可维护性。{...this.props}
语法;.render()
之前、.render()
方法始终放在最后;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
()
使用
()
包裹,有组件嵌套时使用多行模式;()
。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
**/
以下情况需加注释
注释块
/**
*@description 函数注释(做什么的)
*@param {string} p1 参数1的说明
*@param {string} p2 参数2的说明,比较长
*@return 返回值描述
**/
getUserInfo(p1,p2) => {
// do something
return xxx
}
使用TSLint 管理代码规范
尽量避免使用 any 定义数据类型、写好声明文件
命名
commitizen
进行代码提交 commitizen$ 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
手机扫一扫
移动阅读更方便
你可能感兴趣的文章