React/JSX代码规范

文件与组件命名

• 扩展名:使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomeView.component.js,HomeView.style.js,HomeView.action.js等。

• 文件名: 使用驼峰命名法且首字母大写，如HomeView.js。

• 组件命名: 与文件名（除中缀外）完全一致。如果组件单独放置在目录中，则目录名也一致。

//下面的写法都是正确的

import Footer from './Component/Footer/Footer' //在不同文件夹下

import Footer from './Footer' //同一文件夹下

组件声明

使用class与extends关键字。需要导出的组件直接在class关键字前使用export default。

export default class HomeView extends React.Component {
}

对齐

组件的属性要对齐，如果能一行摆下的props，最好摆在一行（个人建议超过两个就换行）。

<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

// 如果一行能摆下props，那就摆在一行
<Foo bar="bar" />

// 子组件照常缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Spazz />
</Foo>

引号

对于JSX的字符串属性使用双引号(")，其他情况下使用单引号。

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

空格

在自闭合的标签中包含一个空格。

<Foo />

state/props

• 对于多个单词组成的pros，使用驼峰命名法。不使用下划线或连接线。

<Foo
  userName="hello"
  phoneNumber={12345678}
/>

• 读取state和props时，使用const与解构，必要时可使用let。不使用var。

const { userName, age, sex } = this.props;
const { checked } = this.state;

括号

当JSX标签超过一行时，使用括号包裹。单行时，不必有括号。

render() {
  return (
    <MyComponent className="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}


render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;

标签

对于没有子组件的JSX标签，始终自闭合。

<Foo className="stuff" />

如果组件有多行属性，则另起一行进行自闭合。

<Foo
  bar="bar"
  baz="baz"
/>

方法

为方法命名时，不使用下划线开头（哪怕是想用作私有方法）。

class extends React.Component {
  onClickSubmit() {
    // do stuff
  }

  // other stuff
});

方法声明的顺序

原则上按如下顺序排列React组件的各个方法（生命周期）：

1. constructor
2. 静态方法（static methods)
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. 点击处理或事件处理函数，比如onClickSubmit()、 onChangeDescription()
12. 用在render中的getter方法，比如getSelectReason()、 getFooterContent()
13. 可选的render方法，比如renderNavigation()、renderProfilePicture()
14. render

• 按如下方式定义propTypes, defaultProps, contextTypes等

import React, { Component, PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

ES6代码规范

变量与常量声明

1 变量

• 尽量使用let来代替var
• 对于全局变量声明，采用 global.xx = xxx，但应避免声明过多全局变量污染环境

2 常量

• 对于常量应使用const进行声明，命名采用驼峰写法
• 对于使用 immutable 数据应用const进行声明

const someNum = 123;
const anotherStr = '不变的字符串';
const arr = ['不', '变', '数', '组'];
const anotherObj = {
  '不变对象': true
};

字符串

1 处理多行字符串,使用模板字符串

以反引号( ` )标示，可读性更强，代码更易编写。 注意排版引起空格的问题，使用场景为声明HTML模板字符串

const tmpl = `
<div class="content">
  <h1>这是换行了。</h1>
</div>`;

2 处理字符串拼接变量时,使用模板字符串

 function sayHi(name) {
   return `How are you, ${name}?`;
 }

解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

var a = 1;
var b = 2;
var c = 3;

ES6允许写成下面这样，就是解构

var [a, b, c] = [1, 2, 3];

1 解构语句中不使用圆括号

let [a, b] = [11, 22];

2 对象解构

对象解构 元素与顺序无关

对象指定默认值时仅对恒等于undefined ( !== null ) 的情况生效

• 若函数形参为对象时，使用对象解构赋值

function someFun(opt) {
  let { opt1, opt2 } = opt;
  console.log(`$(opt1) 加上 $(opt2)`);
}

function someFun({ opt1, opt2 }) {
  console.log(opt1);
}

• 若函数有多个返回值时，使用对象解构，不使用数组解构，避免添加顺序的问题

function anotherFun() {
  const one = 1, two = 2, three = 3;
  return { one, two, three };
}
const { one, three, two } = anotherFun(); // 不用管顺序
// one = 1, two = 2, three = 3

• 已声明的变量不能用于解构赋值（语法错误）

3 数组解构

数组元素与顺序相关

• 交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x]; // 交换变量

• 将数组成员赋值给变量时，使用数组解构

const arr = [1, 2, 3, 4, 5];

const [one, two] = arr;

数组

1 将类数组(array-like)对象与可遍历对象(如Set, Map)转为真正数组

采用Array.from进行转换

function foo() {
  let args = Array.from(arguments);
}

2 数组去重

结合Set结构与Array.from 使用indexOf，HashTable等形式，不够简洁清晰

function deduplication(arr) {
  return Array.from(new Set(arr));
}

3 数组拷贝

采用数组扩展 ==...== 形式

const items = [1, 2, 3];

let copyTemp = [...items];

4 将一组数值转为数组

采用Array.of进行转换

let arr1 = Array.of(2);  // [2]
let arr2 = Array.of(1, 2, 3); // [1, 2, 3]

函数

1 当要用函数表达式或匿名函数时，使用箭头函数(Arrow Functions)

箭头函数更加简洁，并且绑定了this

const foo = (x) => {
  console.log(foo.name); // 返回'foo'
};

[1, 2, 3].map( (x) => {
  return x + 1;
});

var testObj = {
  name: 'testObj',
  init() {
    // 箭头函数自动绑定定义时所在的对象
    document.addEventListener('click', () => this.doSth(), false);
  },
  doSth() {
    console.log(this.name);
  }
};

箭头函数书写约定

函数体只有单行语句时，允许写在同一行并去除花括号

当函数只有一个参数时，允许去除参数外层的括号

const foo = x => x + x; // 注意此处会隐性return x + x

const foo = (x) => {
  return x + x; // 若函数体有花括号语句块时须进行显性的return
}; 

[1, 2, 3].map( x => x * x);

用箭头函数返回一个对象，应用括号包裹

let test = x => ({ x: x }); // 使用括号可正确return {x:x}

2 立即调用函数 IIFE

使用箭头函数

(() => {
  console.log('哈');
})();

3 函数参数指定默认值

采用函数默认参数赋值语法

function foo(opts = {}) {
  console.log('更加简洁，安全');
}

4 对象中的函数方法使用缩写形式

更加简洁，函数方法不要使用箭头函数，避免this指向的混乱

//正确写法
const des = '对象模块写法'; // 使用对象属性值简写方式
const shopObj = {
  des,
  foo() {
    console.log(this.des);
  }
};

类

1 类名应使用帕斯卡写法(PascalCased)

class SomeClass {

}

2 定义类时，方法的顺序如下：

1. constructor
2. public get/set 公用访问器，set只能传一个参数
3. public methods 公用方法，公用相关命名使用小驼峰式写法(lowerCamelCase)
4. private get/set 私有访问器，私有相关命名应加上下划线 _ 为前缀
5. private methods 私有方法

class SomeClass {
  constructor() {
    // constructor
  }

  get aval() {
    // public getter
  }

  set aval(val) {
    // public setter
  }

  doSth() {
    // 公用方法
  }

  get _aval() {
    // private getter
  }

  set _aval() {
    // private setter
  }

  _doSth() {
    // 私有方法
  }
}

3 如果不是class类，不使用new

// 不推荐❌
function Foo() {
}
const foo = new Foo();

// 正确✔
class Foo {
}
const foo = new Foo();

4 使用真正意思上的类Class写法，不使用prototype进行模拟扩展

Class更加简洁，易维护

class Dog {
  constructor(names = []) {
    this._names = [...names];
  }
  bark() {
    const currName = this._names[0];
    alert(`one one ${currName}`);
  }
}

5 this的注意事项

子类使用super关键字时，this应在调用super之后才能使用，可在方法中return this来实现链式调用写法

class Foo {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class SubFoo extends Foo {
  constructor(x, y, z) {
    super(x, y);
    this.z = z; // this 放在 super 后调用
  }
  setHeight(height) {
    this.height = height;
    return this;
  }
}

模块

1 使用import / export来做模块加载导出，不使用非标准模块写法

import { lightRed } from './colors';
export default lightRed;

2 import / export 后面采用花括号{ }引入模块的写法时，须在花括号内左右各保留一个空格

import { lightRed } from './colors';

转自：React Native 代码规范