React开发规范1.0

React 代码规范

内容目录

[Toc]

1.部分遵循 eslint 规则，后期可以直接引入 eslint
2.此规范参考 tinper-bee 及 airbnb react 开发规范

基础规范

统一使用 utf-8 编码
==回车换行==统一使用CRLF
Tab 缩进为 4 个空格
统一使用 ES6 语法进行开发 ES6 语法参考
使用 JSX 语法，模块文件统一使用 js 后缀
不要使用 React.createClass
每一个文件只包含一个组件，每一个基本组件只包含单一功能组件设计原则

命名

文件命名
- 文件名使用大驼峰命名 MyComponent
模块命名
- 模块使用当前模块文件夹名一样的名称
如果整个文件夹是一个模块，使用 index.js作为入口文件，然后直接使用当前文件夹名作为模块名称
```
// bad
import Footer from './Footer/index';

// good
import Footer from './Footer';
```

引用命名

模块名使用大驼峰命名

// bad
import myComponent from './MyComponent';

// good
import MyComponent from './MyComponent';

实例使用正常驼峰命名

// bad
const MyComponent = <MyComponent />;

// good
const myComponent = <MyComponent />;

属性命名
- 避免使用 DOM 相关属性来用作其他用途
相关属性为正常 HTML 标签属性，如 style、id、class、href 等
```
// bad
<MyComponent style="fancy" />

// good
<MyComponent variant="fancy" />
```

JSX 书写规范

代码对齐

遵循以下的 JSX 语法缩进格式

// bad
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />
  
// good, 有多行属性的话, 新建一行关闭标签
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>
  
// 若能在一行中显示, 直接写成一行
<Foo bar="bar" />
  
// 子元素按照常规方式缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
</Foo>

单双引号

对于 JSX 属性值总是使用双引号（"）,其他均使用单引号（'）

// bad
<Foo bar='bar' />
  
// good
<Foo bar="bar" />
  
// bad
<Foo style={{ left: "20px" }} />
  
// good
<Foo style={{ left: '20px' }} />

空格

总是在自动关闭的标签前加一个空格，正常情况下不需要换行

// bad
<Foo/>
  
// very bad
<Foo                 />
  
// bad
<Foo
 />
  
// good
<Foo />

不要在 JSX {} 引用括号里两边加空格

// bad
<Foo bar={ baz } />
  
// good
<Foo bar={baz} />

组件结构

总体规则
函数式组件形式优于 ES6 Class
书写规则
组件（ES6 Class）内部生命周期函数书写顺序，如下

可选的static方法
constructor构造函数
getChildContext获取子元素内容
componentWillMount模块渲染前
componentDidMount模块渲染后
componentWillReceiveProps模块将接受新的数据
shouldComponentUpdate判断模块需不需要重新渲染
componentWillUpdate上面的的方法返回 true ，模块将重新渲染
componentDidUpdate模块渲染结束
componentWillUnmount模块将从DOM中清除，可以做些清理任务
点击回调或者事件处理器如 onClickSubmit() 或 onChangeDescription()
render 里的 getter方法如 getSelectReason() 或 getFooterContent()
可选的 render 方法如 renderNavigation() 或 renderProfilePicture()

render render() 方法

示例代码

如何定义 propTypes, defaultProps, contextTypes, 等其他属性…

import React from 'react';
import PropTypes from 'prop-types';
        
// 定义 props 类型
const propTypes = {
  name: React.PropTypes.string
};
        
// 如果需要
const defaultProps = {
  name: 'Guest'
};
        
class Person extends React.Component {
  // 构造函数
  constructor (props) {
    super(props);
    // 定义 state
    this.state = { smiling: false };
  }
        
  // 生命周期方法
  componentWillMount () {},
  componentDidMount () {},
  componentWillUnmount () {},
          
  // getters and setters
  get attr() {}
        
  // handlers
  handleClick = ()=>{},
        
  // render
  renderChild() {},
  render () {},
        
}
        
/**
 * 类变量定义
 */
Person.defaultProps = defaultProps;
        
/**
 * 统一都要定义 propTypes
 * @type {Object}
 */
Person.propTypes = propTypes;

语法规范

return (返回)

将多行的 JSX 标签写在 () 里，并确保有返回内容

// bad
render() {
  return <MyComponent className="long body" foo="bar">
           <MyChild />
         </MyComponent>;
}
  
// good
render() {
  return (
    <MyComponent className="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}
  
// good,单行可以不需要
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

最后修改于 2018-03-05

React 代码规范

内容目录

基础规范

命名

文件命名

模块命名

引用命名

属性命名

JSX 书写规范

代码对齐

单双引号

空格

标签

组件结构

语法规范

return (返回)