React/JSX及React Native 编码规范

最近开始研究公司前端web商城(React)和前期APP(React Native)的维护,发现了同事之间的代码风格差距太大,为了以后更好的阅读代码,整理一下React和JSX的一些编码规范。

1.基本规范

• 每个文件只包含一个React组件,命名要顾名知义。

• React Native 和 React都要尽可能的使用ES6语法。
• console在调试时写，调试完立即删除。

2.命名规范

• 文件名称：
  文件夹和文件名要使用大驼峰命名法,比如 HomeIndex.js;
  通用的组件放在Component文件夹。入口文件要明确，一般可以使用index.js。
  React Native中如果仅有android/ios其中一端的功能,在文件的尾加.android/.ios,
  比如：KeyBoard.android.js和KeyBoard.ios.js。杜绝1、2、3、one、two、three之类名称,用功能或者是模块来命名。
  调用原生android/ios都写在同一个.js文件内，如果是Dialog之类的用途广泛的，
  可放在BaseView文件夹上，否则放在Action对应的业务文件夹内。

3.属性

3.1 属性名

• 组件的属性使用小驼峰命名法。

• 在React中className代替class属性,htmlFor代替for属性。
• 使用外联样式时,属性名最好带有Style关键字。比如:flexStyle.js

3.2属性设置

• 在封装的组件内一定要设置属性(以便propTypes校验),不要在外部改变属性的值。

• 属性较多使用{...this.props}语法。(最好在属性开头加上{...this.props},为了防止少写属性,产生报错)
• 如果重复设置属性值时,前面的值会被后面的覆盖。

3.3属性对齐方式

• 属性较少时可以行内排列

• 属性较多时每行一个属性,闭合标签单独成行

3.4行内迭代

• 运算逻辑简单的直接使用行内迭代。

return (
  

    {this.props.data.map(function(data, i) {
      return ()
    })}
    
);

4.注释

• 组件之间的注释需要用 {/* 注释内容 */} 包裹。

var content = (
  

    {/* child comment, put {} around */}
    
  
);

5.引号使用

• HTML/JSX 属性使用双引号 "；

• JS 使用单引号 '；

// bad

// good

// bad

// good

// JavaScript Expression
const person = ;
// HTML/JSX
const myDivElement = 
;
const app = 
;
const content = (
  
    {window.isLoggedIn ? 
 : }
  
);

6. 条件 HTML

• 简短的输出在行内直接三元运算符；

{this.state.show && 'This is Shown'}
{this.state.on ? 'On' : 'Off'}

• 较复杂的结构可以在 .render()方法内定义一个以 Html结尾的变量。

var dinosaurHtml = '';if (this.state.showDinosaurs) { dinosaurHtml = ( 
   
 );}return ( 
 ... {dinosaurHtml} ... 
);
[
](https://github.com/minwe/style-guide/blob/master/React.js.md#-使用)

7.() 使用

• 多行的 JSX 使用 () 包裹，有组件嵌套时使用多行模式；

// bad
return (
);
// good
var multilineJsx = (  
  

    
    

  
);
// good
return (
  

    
    
  
);

• 单行 JSX 省略 ()。

var singleLineJsx = 
Simple JSX
;  
// good, when single line
render() {
  const body = 
hello
;
  return {body};
}

8.自闭合标签

• JSX 中所有标签必须闭合；

• 没有子元素的组件使用自闭合语法，自闭合标签 / 前留一个空格。

// bad


// very bad

// bad

// good

9.组件内部代码组织

• 不要使用下划线前缀命名 React 组件的方法；

// bad
React.createClass({
  _onClickSubmit() {
    // do stuff
  }
  // other stuff
});
// good
React.createClass({
  onClickSubmit() {
    // do stuff
  }
  // other stuff
});

• 按照生命周期组顺序织组件的方法、属性；
• 方法（属性）之间空一行；
• .render() 方法始终放在最后；
• 自定义方法 React API 方法之后、.render() 之前。

// React 组件中按照以下顺序组织代码
React.createClass({  
  displayName: '',
  mixins: [],
  statics: {},
  propTypes: {},
  getDefaultProps() {
    // ...
  },
  getInitialState() {
    // do something
  },
  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() {
    // ...
  },
  // getter methods for render like getSelectReason() or getFooterContent()
  // Optional render methods like renderNavigation() or renderProfilePicture()
  render() {
    // ...
  }
});