React编码规范总结

基本规范

  • 尽可能使用ES6语法（可包含一些ES7语法）
  • 每个文件仅export一个React组件，命名要顾名思义。

    文件内允许包含不可复用的子组件，无状态组件尽可能使用函数式组件

  • 调试时console的代码要在调试完尽快删除，注释掉的代码尽快删除

    虽然目前配合webpack打包工具可以打包时删除，但调试完没必要的代码还是尽量删除的好

命名规范

  • 文件夹和文件名使用大驼峰命名法，比如：Component/TitleBar.jsx
  • 通用组件放在 Component 文件夹，入口文件尽量使用 index.js
  • JSX组件命名必须大写开头(React要求，否则不视为组件)，组件名即文件名，同样采用大驼峰命名法： <TitleBar />
  • JSX中组件的属性使用小驼峰命名法，如：className, htmlFor
  • 组件类的方法命名使用小驼峰命名，不要使用下划线前缀：
1
2
3
4
5
6
class Component extends React {
    // good
    onClickSubmit() {
        // do something
    }
}

JSX规范

  • 使用外联样式时（CSS-IN-JS）属性名最好带 Style 关键字，小驼峰命名方式：buttonStyle.js
  • 属性较多的组件使用 {...this.props} 语法传递属性，如重复设置属性值时,前面的值会被后面的覆盖
  • 属性较少时可以行内排列，属性较多时每行一个属性,闭合标签单独成行，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// good
<Component name="name" title="title" />
// bad
<Component name="name" title="title" action="action" onCallback={func} />
// bad
<Component
    name="name"
    title="title"
    action="action"
    onCallback={func} />
// good
<Component
    name="name"
    title="title"
    action="action"
    onCallback={func}
    />
  • 运算逻辑简单的直接使用行内迭代
1
2
3
4
5
6
7
return (
    <div>
        {this.props.data.map(function(data, i) {
            return (<Component data={data} key={i} />)
        })}
    </div>
);

注释

  • 组件之间的注释需要用 {/ 注释内容 /} 包裹。
  • HTML/JSX 属性使用双引号 “；JS 使用单引号 ‘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />
// JavaScript Expression
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
// HTML/JSX
const myDivElement = <div className="foo" />;
const app = <Nav color="blue" />;
const content = (
  <Container>
    {window.isLoggedIn ? <Nav /> : <Login />}
  </Container>
);
  • 简短的输出在行内直接三元运算符；
1
2
{this.state.show && 'This is Shown'}
{this.state.on ? 'On' : 'Off'}
  • 多行的 JSX 使用 () 包裹，有组件嵌套时使用多行模式；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// bad
return (<div><ComponentOne /><ComponentTwo /></div>);
// good
var multilineJsx = (
  <header>
    <Logo />
    <Nav />
  </header>
);
// good
return (
  <div>
    <ComponentOne />
    <ComponentTwo />
  </div>
);
  • 单行 JSX 省略 ()
1
2
3
4
5
6
var singleLineJsx = <h1>Simple JSX</h1>;  
// good, when single line
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}
  • JSX 中所有标签必须闭合；没有子元素的组件使用自闭合标签语法，自闭合标签 / 前留一个空格。
1
2
3
4
5
6
7
8
9
10
// bad
<Logo></Logo>
<Logo/>
// very bad
<Foo    />
// bad
<Foo
 />
// good
<Logo />

组件内部代码

  • 按照生命周期组顺序织组件的方法、属性；方法（属性）之间空一行；
  • .render() 方法始终放在最后；
  • 自定义方法 React API 方法之后、.render() 之前。
  • 有初始化state需求或者绑定this的代码放到 constructor中，没有则不写 constructor 方法
  • 绑定this可采用，constructor 中 bind(this) 的方式, 如下面的 handleClick，也可以使用属性命名方法的方式, 如下面的 postMessage，但是需要统一使用其中一种，两者不要混用，下面只是示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// React 组件中按照以下顺序组织代码
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  componentWillMount() {
    // do something
  }
  componentDidMount() {
    // do something: add DOM event listener, etc.
  }
  componentWillReceiveProps() {
  }
  shouldComponentUpdate() {
  }
  componentWillUpdate() {
  }
  
  componentDidUpdate() {
  }
  componentWillUnmount() {
    // do something: remove DOM event listener. etc.
  }
  
  // clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  handleClick() {
    // ...
  }
  postMessage = () => {
      //.....
  }
  // getter methods for render like getSelectReason() or getFooterContent()
  // Optional render methods like renderNavigation() or renderProfilePicture()
  render() {
    // ...
  }
}