前言
一般在团队开发中每个人的代码习惯都不太一样,这样就会导致代码风格不一致,以致于维护和修改bug的时候看别人的代码成为一种痛苦...
这种情况尤其在前端开发中尤为明显。因为关于前端的开发规范貌似也没有行业权威标准。这几天在网上看了下,基本上在开发中通过eslint进行约束,airbnb的标准貌似颇为推崇,今天稍微整理下,准备在日后开发中形成习惯。
基本规则
- 每个文件只包含一个React组件。eslint: react/no-multi-comp;(官方表示在无状态,或者Pure组件允许一个文件包含多个组件,但是我个人觉得一个文件只包含一个组件比较浅显易懂)
- 始终使用JSX语法;
- 不要始终React.createElement方法,除非初始化app的文件不是JSX格式;
Class vs React.createClass vs stateless
- 如果组件拥有内部的state或者refs时,更推荐使用class extends Component,除非有更好的理由使用mixin。eslint:react/prefer-es6-class
// bad
const Listing = React.createClass({
// ...
render() {
return <div>{this.state.hello}</div>;
}
});
// good
class Listing extends React.Component {
// ...
render() {
return <div>{this.state.hello}</div>;
}
}
如果组件没有拥有内部的state或者refs,那么普通函数(不要使用箭头函数)比类的写法更好:
// bad
class Listing extends React.Component {
render() {
return <div>{this.props.hello}</div>;
}
}
// bad (因为箭头函数没有“name”属性)
const Listing = ({ hello }) => (
<div>{hello}</div>
);
// good
function Listing({ hello }) {
return <div>{hello}</div>;
}
命名
- 拓展名:React组件使用.jsx扩展名;
- 文件名:文件名使用帕斯卡命名:HomePage.jsx
- 引用命名:React组件使用帕斯卡命名,引用实例采用驼峰式命名:eslint: react/jsx-pascal-case)(个人不喜欢这样,引用命名还是按照帕斯卡命名)
// bad
import reservationCard from './ReservationCard';
// good
import ReservationCard from './ReservationCard';
// bad
const ReservationItem = <ReservationCard />;
// good
const reservationItem = <ReservationCard />;
声明
不要使用displayName
属性来命名组件,应该使用类的引用名称。
// bad
export default React.createClass({
displayName: 'ReservationCard',
// stuff goes here
});
// good
export default class ReservationCard extends React.Component {
}
对齐
为JSX语法使用下列的对齐方式:eslint: react/jsx-closing-bracket-location
// bad
<Foo superLongParam="bar"
anotherSuperLongParam="baz" />
// good
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
// 如果组件的属性可以放在一行就保持在当前一行中,(个人觉得如果只有一个属性就放在一行)
<Foo bar="bar" />
// 多行属性采用缩进
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
<Quux />
</Foo>
引号
JSX的属性都采用双引号,其他的JS都使用单引号:jsx-quotes。
为什么这样做?JSX 属性 不能包含转义的引号, 所以当输入"don't"这类的缩写的时候用双引号会更方便。
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />
空格
始终在自闭和标签前添加一个空格。
// bad
<Foo/>
// very bad
<Foo />
// bad
<Foo
/>
// good
<Foo />
属性
- 属性名称始终使用驼峰命名法。
// bad
<Foo
UserName="hello"
phone_number={12345678}
/>
// good
<Foo
userName="hello"
phoneNumber={12345678}
/>
- 当属性值等于true的时候,省略该属性的赋值。eslint:react/jsx-boolean-value
// bad
<Foo
hidden={true}
/>
// good
<Foo
hidden
/>
括号
使用括号包裹多行JSX标签,react/wrap-multilines
// bad
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>;
}
// good
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
// good, when single line
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}
标签
- 当标签没有子元素的时候,始终使用自闭合的标签:eslint: react/self-closing-comp
// bad
<Foo className="stuff"></Foo>
// good
<Foo className="stuff" />
- 如果控件有多行属性,关闭标签要另起一行。 eslint: react/jsx-closing-bracket-location
// bad
<Foo
bar="bar"
baz="baz" />
// good
<Foo
bar="bar"
baz="baz"
/>
方法
在 render 方法中事件的回调函数,应该在构造函数中进行bind绑定。 eslint: react/jsx-no-bind。
为什么这样做? 在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。
// bad
class extends React.Component {
onClickDiv() {
// do stuff
}
render() {
return <div onClick={this.onClickDiv.bind(this)} />
}
}
// good
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
// do stuff
}
render() {
return <div onClick={this.onClickDiv} />
}
}
- React 组件的内部方法命名不要使用下划线前缀。
// bad
React.createClass({
_onClickSubmit() {
// do stuff
},
// other stuff
});
// good
class extends React.Component {
onClickSubmit() {
// do stuff
}
// other stuff
}
排序
class extends React.Component的顺序:
- static静态方法
- constructor
- getChildContext
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
- 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription()
- render函数中的 getter 方法 比如 getSelectReason() 或者 getFooterContent()
可选的 render 方法 比如 renderNavigation() 或者 renderProfilePicture()
- render
怎么定义propTypes, defaultProps, contextTypes等
import React, { PropTypes } from 'react';
const propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
const defaultProps = {
text: 'Hello World',
};
class Link extends React.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;
关于这个开发规范差不多就这样吧,eslint的配置个人在研究下,下次再放出来
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。