前言
一般在团队开发中每个人的代码习惯都不太一样，这样就会导致代码风格不一致，以致于维护和修改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 {this.state.hello};
}
});
// good
class Listing extends React.Component {
// ...
render() {
return {this.state.hello};
}
}如果组件没有拥有内部的state或者refs，那么普通函数(不要使用箭头函数)比类的写法更好：
// bad
class Listing extends React.Component {
render() {
return {this.props.hello};
}
}
// bad (因为箭头函数没有“name”属性)
const Listing = ({ hello }) => (
{hello}
);
// good
function Listing({ hello }) {
return {hello};
}命名
- 拓展名：React组件使用.jsx扩展名；
- 文件名：文件名使用帕斯卡命名：HomePage.jsx
- 引用命名：React组件使用帕斯卡命名，引用实例采用驼峰式命名：eslint: react/jsx-pascal-case)(个人不喜欢这样，引用命名还是按照帕斯卡命名)
// bad
import reservationCard from './ReservationCard';
// good
import ReservationCard from './ReservationCard';
// bad
const ReservationItem = 声明
不要使用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
引号
JSX的属性都采用双引号，其他的JS都使用单引号：jsx-quotes。
为什么这样做？JSX 属性 不能包含转义的引号, 所以当输入"don't"这类的缩写的时候用双引号会更方便。
// bad
空格
始终在自闭和标签前添加一个空格。
// bad
属性
- 属性名称始终使用驼峰命名法。
// bad
- 当属性值等于true的时候，省略该属性的赋值。eslint:react/jsx-boolean-value
// bad
括号
使用括号包裹多行JSX标签，react/wrap-multilines
// bad
render() {
return
;
}
// good
render() {
return (
);
}
// good, when single line
render() {
const body = hello;
return {body} ;
}标签
- 当标签没有子元素的时候，始终使用自闭合的标签：eslint: react/self-closing-comp
// bad
- 如果控件有多行属性，关闭标签要另起一行。 eslint: react/jsx-closing-bracket-location
// bad
方法
在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。 eslint: react/jsx-no-bind。
为什么这样做? 在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。
// bad
class extends React.Component {
onClickDiv() {
// do stuff
}
render() {
return
}
}
// good
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
// do stuff
}
render() {
return
}
}- 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 {this.props.text}
}
}
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
export default Link;关于这个开发规范差不多就这样吧，eslint的配置个人在研究下，下次再放出来