通常在团队开发中每一个人的代码习惯都不太同样,这样就会致使代码风格不一致,以至于维护和修改bug的时候看别人的代码成为一种痛苦...
这种状况尤为在前端开发中尤其明显。由于关于前端的开发规范貌似也没有行业权威标准。这几天在网上看了下,基本上在开发中经过eslint进行约束,airbnb的标准貌似颇为推崇,今天稍微整理下,准备在往后开发中造成习惯。javascript
// 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>; }
// bad import reservationCard from './ReservationCard'; // good import ReservationCard from './ReservationCard'; // bad const ReservationItem = <ReservationCard />; // good const reservationItem = <ReservationCard />;
不要使用displayName
属性来命名组件,应该使用类的引用名称。java
// bad export default React.createClass({ displayName: 'ReservationCard', // stuff goes here }); // good export default class ReservationCard extends React.Component { }
为JSX语法使用下列的对齐方式:eslint: react/jsx-closing-bracket-locationreact
// 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"这类的缩写的时候用双引号会更方便。es6
// bad <Foo bar='bar' /> // good <Foo bar="bar" /> // bad <Foo style={{ left: "20px" }} /> // good <Foo style={{ left: '20px' }} />
始终在自闭和标签前添加一个空格。app
// bad <Foo/> // very bad <Foo /> // bad <Foo /> // good <Foo />
// bad <Foo UserName="hello" phone_number={12345678} /> // good <Foo userName="hello" phoneNumber={12345678} />
// bad <Foo hidden={true} /> // good <Foo hidden />
使用括号包裹多行JSX标签,react/wrap-multilinesless
// 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>; }
// bad <Foo className="stuff"></Foo> // good <Foo className="stuff" />
// 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} /> } }
// bad React.createClass({ _onClickSubmit() { // do stuff }, // other stuff }); // good class extends React.Component { onClickSubmit() { // do stuff } // other stuff }
class extends React.Component的顺序:ui
可选的 render 方法 好比 renderNavigation() 或者 renderProfilePicture()this
怎么定义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的配置我的在研究下,下次再放出来