React 代码规范

作者：陈学家 链接：https://zhuanlan.zhihu.com/p/21458464
来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

内容目录：

• 关于
• 基础规范
• 组件结构
• 命名规范
• jsx 书写规范
• eslint-plugin-react

关于
在代码的设计上，每个团队可能都有一定的代码规范和模式，好的代码规范能够提高代码的可读性便于协作沟通，好的模式能够上层设计上避免不必要的 bug 出现。本节会参考社区提供一些 React 的规范和优秀的设计模式。

基础规范

1. 统一全部采用 Es6
2. 组件文件名称采用大驼峰命名

组件结构
总体规则：** stateless(Function)** 优先于** Es6 Class** 优先于 React.createClass；书写规则： 规范组件内部方法的定义顺序

Es6 class 定义规范:

1. static 方法
2. constructor
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. clickHandlers + eventHandlers 如 onClickSubmit() 或 onChangeDescription()
12. getter methods for render 如 getSelectReason() 或 getFooterContent()
13. render methods 如 renderNavigation() 或 renderProfilePicture()
14. render

以 Es6 Class 定义的组件为例；

const defaultProps = {
   name: 'Guest'
};
const propTypes = { 
  name: React.PropTypes.string
};
class Person extends React.Component { 
  
  // 构造函数 
  constructor (props) { 
    super(props);
     // 定义 state 
    this.state = { smiling: false }; 
    // 定义 eventHandler 
    this.handleClick = this.handleClick.bind(this); 
  } 

  // 生命周期方法 
  componentWillMount () {}, 
  componentDidMount () {}, 
  componentWillUnmount () {}, 

  // getters and setters 
  get attr() {} 
  // handlers 
  handleClick() {}, 
  // render 
  renderChild() {}, 
  render () {},
}
/** 
  * 类变量定义 
  */
Person.defaultProps = defaultProps;

/** 
  * 统一都要定义 propTypes 
  * @type {Object} 
  */
Person.propTypes = propTypes;

命名规范

• 组件名称：大驼峰
• 属性名称：小驼峰
• 事件处理函数：handleSomething
• 自定义事件属性名称：onSomething={this.handleSomething}
• key: 不能使用数组 index ，构造或使用唯一的 id
• 组件方法名称：避免使用下划线开头的命名

jsx 书写规范

• 自闭合

// bad
<Foo className="stuff"></Foo>

// good
<Foo className="stuff" />

• 属性对齐

// bad
<Foo superLongParam="bar" 
     anotherSuperLongParam="baz" />
// good
<Foo superLongParam="bar" 
     anotherSuperLongParam="baz"
/>
// if props fit in one line then keep it on the same line
<Foo bar="bar" />

• 返回

// 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-plugin-react
规范可以使用 eslint-plugin-react 插件来强制实施，规则和配置可查看 https://github.com/yannickcr/eslint-plugin-react

更多 react 代码规范可参考 https://github.com/airbnb/javascript/tree/master/react