一个良好的代码规范，不仅能提升web性能，提高团队协作，还便于后期维护，拓展。
“代码即文档”是我们对规范的一个愿景。下面就基于ES6的React项目配置，谈几点对React组件规范的几点建议。
我们的组件分为两大类，UI组件和container组件。
UI组件
UI组件是构成前端界面的基础单元，它们不涉及业务逻辑，无生命周期函数，只负责单纯的渲染，所有数据都通过 props 传入。
一， 咱们的UI组件大致分为两种情况，无状态和有状态
- 如果是无状态组件，则使用纯函数，我们大部分的UI组件都是这种纯函数。
import React, {PropTypes} from 'react'
import {connect} from 'react-redux'
const dataType = {
onExpand: PropTypes.func.isRequired,
isOpen: PropTypes.bool
}
const List = ({ onExpand, expanded = false, childred }) =>
<form style={ expanded ? { height: 'auto' } : { height: 0 } }>
{children}
<button onClick={onExpand}>Expand</button>
</form>;
List.propTypes = dataType
export default connect(List)
- 如果是有状态组件(这里的状态，只是负责UI自身的状态），则使用 React 的 PureComponent
import React, {PureComponent, PropTypes} from 'react'
import {connect} from 'react-redux'
@connect(...)
export default class Listing extends PureComponent {
static propTypes = {
model: PropTypes.object.isRequired,
title: PropTypes.string
}
static defaultProps = {
model: {id:0},
title: 'minooo'
}
state = {
isOpen: false
};
onOpen = () => {
this.setState((preState, props) => ({isOpen: !preState.isOpen}))
}
render(){
const {focus} = this.state;
...
}
}
二， 一般在有状态组件中可能需要定义一些方法，这些方法使用箭头函数，以此避免render中的this绑定带来的性能损耗。
// bad
export default class Listing extends PureComponent {
//...
onClick () {
...
};
render(){
return(
<div onClick={this.onClick.bind(this)}>...</div>
)
}
}
// good
export default class Listing extends PureComponent {
//...
onClick = () => {
...
};
render(){
return(
<div onClick={this.onClick}>...</div>
)
}
}
三， 如果闭合标签内无子节点，则写为单标签
// bad
<i className="i-left"></i>
// good
<i className="i-left" />
四， 为了让便于阅读，请给代码合理的间隔，换行，让我们的代码像诗一样干净利索，一目了然。
// bad
const Course = ({address, tel, onClick}) =>
<div className="bg-white pad2 overflow-h">
<a href="javascript:;" className="ui-border-r inblock pr10" onClick={onClick}>
<i className={"i-zuobiao32 main-color font-size-16 fl mr5 "+styles.icon}></i>
<span className={"text-overflow-1 " +styles.address}>{address}</span>
</a>
<a href={"tel: "+tel}><i className={"i-dianhua32 main-color font-size-16 fr "+styles.icon}></i></a
</div>;
// good
const Course = ({address, tel, onClick}) =>
<div className="bg-white pad2 overflow-h">
<a
href="javascript:;"
className="ui-border-r inblock pr10"
onClick={onClick}
>
<i className={`i-zuobiao32 main-color font-size-16 fl mr5 ${styles.icon}`} />
<span className={"text-overflow-1 " + styles.address}>{address}</span>
</a>
<a href={"tel: " + tel}>
<i className={"i-dianhua32 main-color font-size-16 fr " + styles.icon} />
</a>
</div>;
五，尽量避免使用数组的索引作为key的属性值，推荐使用指定的ID，原因？
// bad
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
// good
{todos.map(todo => (
<Todo
{...todo}
key={todo.id}
/>
))}
六，使用 ref 回调函数，官方ref
// bad
<Foo
ref="myRef"
/>
// good
<Foo
ref={(ref) => { this.myRef = ref; }}
/>
七，使用箭头函数锁定局部变量
{props.items.map((item, index) =>
<Item
key={item.key}
// good
onClick={() => this.doSomethingWith(item.name, index)}
// bad
onClick={this.doSomething.bind(null, item.name, index)}
/>
)}
