React/JSX代码规范
文件与组件命名
扩展名:使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件,则通过中缀(小写)进一步区分,例如:HomeView.component.js,HomeView.style.js,HomeView.action.js等。
文件名: 使用驼峰命名法且首字母大写,如HomeView.js。
组件命名: 与文件名(除中缀外)完全一致。如果组件单独放置在目录中,则目录名也一致。
//下面的写法都是正确的
import Footer from './Component/Footer/Footer' //在不同文件夹下
import Footer from './Footer' //同一文件夹下
组件声明
使用class与extends关键字。需要导出的组件直接在class关键字前使用export default。
export default class HomeView extends React.Component {
}
对齐
组件的属性要对齐,如果能一行摆下的props,最好摆在一行(个人建议超过两个就换行)。
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
// 如果一行能摆下props,那就摆在一行
<Foo bar="bar" />
// 子组件照常缩进
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
<Spazz />
</Foo>
引号
对于JSX的字符串属性使用双引号(“),其他情况下使用单引号。
<Foo bar="bar" />
<Foo style={{ left: '20px' }} />
空格
在自闭合的标签中包含一个空格。
<Foo />
state/props
- 对于多个单词组成的pros,使用驼峰命名法。不使用下划线或连接线。
<Foo
userName="hello"
phoneNumber={12345678}
/>
- 读取state和props时,使用const与解构,必要时可使用let。不使用var。
const { userName, age, sex } = this.props;
const { checked } = this.state;
括号
当JSX标签超过一行时,使用括号包裹。单行时,不必有括号。
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
标签
对于没有子组件的JSX标签,始终自闭合。
<Foo className="stuff" />
如果组件有多行属性,则另起一行进行自闭合。
<Foo
bar="bar"
baz="baz"
/>
方法
为方法命名时,不使用下划线开头(哪怕是想用作私有方法)。
class extends React.Component {
onClickSubmit() {
// do stuff
}
// other stuff
});
方法声明的顺序
原则上按如下顺序排列React组件的各个方法(生命周期):
1. constructor
2. 静态方法(static methods)
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. 点击处理或事件处理函数,比如onClickSubmit()、 onChangeDescription()
12. 用在render中的getter方法,比如getSelectReason()、 getFooterContent()
13. 可选的render方法,比如renderNavigation()、renderProfilePicture()
14. render
- 按如下方式定义propTypes, defaultProps, contextTypes等
import React, { Component, PropTypes } from 'react';
const propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
const defaultProps = {
text: 'Hello World',
};
class Link extends Component {
static methodsAreOk() {
return true;
}
render() {
return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
}
}
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
export default Link;
ES6代码规范
变量与常量声明
1 变量
- 尽量使用let来代替var
- 对于全局变量声明,采用 global.xx = xxx,但应避免声明过多全局变量污染环境
2 常量
- 对于常量应使用const进行声明,命名采用驼峰写法
- 对于使用 immutable 数据应用const进行声明
const someNum = 123;
const anotherStr = '不变的字符串';
const arr = ['不', '变', '数', '组'];
const anotherObj = {
'不变对象': true
};
字符串
1 处理多行字符串,使用模板字符串
以反引号( ` )标示,可读性更强,代码更易编写。
注意排版引起空格的问题,使用场景为声明HTML模板字符串
const tmpl = `
<div class="content">
<h1>这是换行了。</h1>
</div>`;
2 处理字符串拼接变量时,使用模板字符串
function sayHi(name) {
return `How are you, ${name}?`;
}
解构
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
var a = 1;
var b = 2;
var c = 3;
ES6允许写成下面这样,就是解构
var [a, b, c] = [1, 2, 3];
1 解构语句中不使用圆括号
let [a, b] = [11, 22];
2 对象解构
对象解构 元素与顺序无关
对象指定默认值时仅对恒等于undefined ( !== null ) 的情况生效
- 若函数形参为对象时,使用对象解构赋值
function someFun(opt) {
let { opt1, opt2 } = opt;
console.log(`$(opt1) 加上 $(opt2)`);
}
function someFun({ opt1, opt2 }) {
console.log(opt1);
}
- 若函数有多个返回值时,使用对象解构,不使用数组解构,避免添加顺序的问题
function anotherFun() {
const one = 1, two = 2, three = 3;
return { one, two, three };
}
const { one, three, two } = anotherFun(); // 不用管顺序
// one = 1, two = 2, three = 3
- 已声明的变量不能用于解构赋值(语法错误)
3 数组解构
数组元素与顺序相关
- 交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x]; // 交换变量
- 将数组成员赋值给变量时,使用数组解构
const arr = [1, 2, 3, 4, 5];
const [one, two] = arr;
数组
1 将类数组(array-like)对象与可遍历对象(如Set, Map)转为真正数组
采用Array.from进行转换
function foo() {
let args = Array.from(arguments);
}
2 数组去重
结合Set结构与Array.from
使用indexOf,HashTable等形式,不够简洁清晰
function deduplication(arr) {
return Array.from(new Set(arr));
}
3 数组拷贝
采用数组扩展 ==…== 形式
const items = [1, 2, 3];
let copyTemp = [...items];
4 将一组数值转为数组
采用Array.of进行转换
let arr1 = Array.of(2); // [2]
let arr2 = Array.of(1, 2, 3); // [1, 2, 3]
函数
1 当要用函数表达式或匿名函数时,使用箭头函数(Arrow Functions)
箭头函数更加简洁,并且绑定了this
const foo = (x) => {
console.log(foo.name); // 返回'foo'
};
[1, 2, 3].map( (x) => {
return x + 1;
});
var testObj = {
name: 'testObj',
init() {
// 箭头函数自动绑定定义时所在的对象
document.addEventListener('click', () => this.doSth(), false);
},
doSth() {
console.log(this.name);
}
};
箭头函数书写约定
函数体只有单行语句时,允许写在同一行并去除花括号
当函数只有一个参数时,允许去除参数外层的括号
const foo = x => x + x; // 注意此处会隐性return x + x
const foo = (x) => {
return x + x; // 若函数体有花括号语句块时须进行显性的return
};
[1, 2, 3].map( x => x * x);
用箭头函数返回一个对象,应用括号包裹
let test = x => ({ x: x }); // 使用括号可正确return {x:x}
2 立即调用函数 IIFE
使用箭头函数
(() => {
console.log('哈');
})();
3 函数参数指定默认值
采用函数默认参数赋值语法
function foo(opts = {}) {
console.log('更加简洁,安全');
}
4 对象中的函数方法使用缩写形式
更加简洁,函数方法不要使用箭头函数,避免this指向的混乱
//正确写法
const des = '对象模块写法'; // 使用对象属性值简写方式
const shopObj = {
des,
foo() {
console.log(this.des);
}
};
类
1 类名应使用帕斯卡写法(PascalCased)
class SomeClass {
}
2 定义类时,方法的顺序如下:
- constructor
- public get/set 公用访问器,set只能传一个参数
- public methods 公用方法,公用相关命名使用小驼峰式写法(lowerCamelCase)
- private get/set 私有访问器,私有相关命名应加上下划线 _ 为前缀
- private methods 私有方法
class SomeClass {
constructor() {
// constructor
}
get aval() {
// public getter
}
set aval(val) {
// public setter
}
doSth() {
// 公用方法
}
get _aval() {
// private getter
}
set _aval() {
// private setter
}
_doSth() {
// 私有方法
}
}
3 如果不是class类,不使用new
// 不推荐❌
function Foo() {
}
const foo = new Foo();
// 正确✔
class Foo {
}
const foo = new Foo();
4 使用真正意思上的类Class写法,不使用prototype进行模拟扩展
Class更加简洁,易维护
class Dog {
constructor(names = []) {
this._names = [...names];
}
bark() {
const currName = this._names[0];
alert(`one one ${currName}`);
}
}
5 this的注意事项
子类使用super关键字时,this应在调用super之后才能使用,可在方法中return this来实现链式调用写法
class Foo {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class SubFoo extends Foo {
constructor(x, y, z) {
super(x, y);
this.z = z; // this 放在 super 后调用
}
setHeight(height) {
this.height = height;
return this;
}
}
模块
1 使用import / export来做模块加载导出,不使用非标准模块写法
import { lightRed } from './colors';
export default lightRed;
2 import / export 后面采用花括号{ }引入模块的写法时,须在花括号内左右各保留一个空格
import { lightRed } from './colors';