关于React组件规范化的一些建议——UI组件篇

一个良好的代码规范，不仅能提升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)}
  />
)}