ReactNative编写规范

<一>  React 代码规范

文件与组件命名

  •  扩展名: 使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomePageView.component.js, HomePageView.style.js, HomePageView.action.js等
  •  文件名: 使用驼峰命名法且首字母大写，如HomePageView.js
  •  组件命名: 与文件名（除中缀外）完全一致。如果组件单独放置在目录中，则目录名也一致

Bad Code
1
import Footer from './Component/OrderAccount/OrderAccountView';

       

Good Code
1
import Footer from './Component/OrderAccount/OrderAccount';

      

Good Code
1
import Footer from './OrderAccount';

组件声明

  •  使用class与extends关键字。不使用React.createClass方法。需要导出的组件直接在class关键字前使用export default。

Bad Code
1
export default React.createClass({ });
Good Code
1
export default class HomePageView extends Component { }

对齐

  •  按下面的案例对齐

Bad Code
1
2
<Foo superLongParam="bar"
            anotherSuperLongParam="baz" /> 
Good Code
1
2
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" /> 
 
  // 如果一行能摆下props，那就摆在一行
Bad Code
1
<Foo bar="bar" />
 
   // 子组件照常缩进
Good Code
1
2
3
4
5
6
<Foo
   superLongParam="bar"
   anotherSuperLongParam="baz"
> 
   <Spazz />
</Foo>

引号

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

Bad Code
1
<Foo bar='bar' />
Good Code
1
 <Foo bar="bar" /> 
Bad Code
1
<Foo style={{ left: "20px" }} />
Good Code
1
 <Foo style={{ left: '20px' }} />

空格

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

Bad Code
1
<Foo/> 
Bad Code
1
<Foo                 /> 
Bad Code
1
<Foo  /> 
Good Code
1
<Foo />

state/props

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

Bad Code
1
2
3
4
<Foo
   UserName="hello"
   phone_number={12345678}
/>
Good Code
1
2
3
4
<Foo
   userName="hello"
   phoneNumber={12345678}
/>
  • 读取state和props时，使用const与解构，必要时可使用let。不使用var。

Bad Code
1
2
var userName = this.props.userName;
let checked = this.state.checked; 
Good Code
1
2
const { userName, age, sex } = this.props;
const { checked } = this.state;

括号

  • 当JSX标签超过一行时，使用括号包裹。

Bad Code
1
2
3
4
5
render() {
   return <MyComponent className="long body" foo="bar">
            <MyChild />
      </MyComponent>;
} 
Good Code
1
2
3
4
5
6
7
render() {
   return (
            <MyComponent className="long body" foo="bar">
           <MyChild />
            </MyComponent>
   );
} 

// good, when single line

Good Code
1
2
3
4
render() {
   const body = <div>hello</div>;
   return <MyComponent>{body}</MyComponent>;
}

标签

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

Bad Code
1
<Foo className="stuff"></Foo>
Good Code
1
<Foo className="stuff" />

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

Bad Code
1
2
3
<Foo
   bar="bar"
   baz="baz" /> 
Good Code
1
2
3
4
<Foo
   bar="bar"
   baz="baz"
/>

方法

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

Bad Code
1
2
3
4
5
6
React.createClass({
   _onClickSubmit() {
        // do stuff
   }
    // other stuff
}); 
Good Code
1
2
3
4
5
6
class extends React.Component {
   onClickSubmit() {
        // do stuff
    }
    // other stuff
});

 

方法声明的顺序

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

<二>ES6代码规范

变量与常量声明

  •  变量

           尽量使用let来代替var

           对于全局变量声明，采用global.xxx = xxx，但应避免声明过多全局变量污染环境

  •  常量

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

          对于使用 immutable 数据应用const进行声明

Bad Code
1
2
3
4
   let someNum = 123;
  const AnotherStr = '不变的字符串';
  let arr = ['不', '变', '数', '组'];
  var ANOTHER_OBJ = {   '不变对象': true };
Good Code
1
2
3
4
  const someNum = 123;
 const anotherStr = '不变的字符串';
 const arr = ['不', '变', '数', '组'];
 const anotherObj = {   '不变对象': true };

 

字符串

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

以反引号( ` )标示

可读性更强，代码更易编写

注意排版引起空格的问题，使用场景为声明HTML模板字符串

 

Bad Code
1
2
3
const tmpl = '<div class="content"> ' +
'<h1>这是换行了。</h1> ' +
                  '</div>';  
Good Code
1
const tmpl = ` <div class="content">   <h1>这是换行了。</h1> </div>`;
  • 处理字符串拼接变量时,使用模板字符串 
Bad Code
1
2
3
function sayHi(name) {
    return 'How are you, ' + name + '?';  
}    
Good Code
1
2
3
function sayHi(name) {
    return `How are you, ${name}?`;
}

 

解构

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

Bad Code
1
2
[(a)] = [11]; // a未定义
let { a: (b) } = {}; // 解析出错  
Good Code
1
let [a, b] = [11, 22];

 

  • 对象解构

对象解构 元素与顺序无关

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

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

Bad Code
1
2
3
4
5
function someFun(opt) {
   let opt1 = opt.opt1;
   let opt2 = opt.opt2;
   console.log(op1);
 }
Good Code
1
2
3
4
5
6
7
function someFun(opt) {
   let { opt1, opt2 } = opt;
   console.log(`$(opt1) 加上 $(opt2)`);
} 
function someFun({ opt1, opt2 }) {
   console.log(opt1);
}

 

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

Bad Code
1
2
3
4
5
6
function anotherFun() {
   const one = 1, two = 2, three = 3;
   return [one, two, three];
 }
const [one, three, two] = anotherFun(); // 顺序乱了
 // one = 1, two = 3, three = 2  
Good Code
1
2
3
4
5
6
function anotherFun() {
   const one = 1, two = 2, three = 3;
   return { one, two, three };
}
const { one, three, two } = anotherFun(); // 不用管顺序
// one = 1, two = 2, three = 3

 

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

// 语法错误

Bad Code
1
let a; { a } = { b: 123};
  • 数组解构

数组元素与顺序相关

  • 交换变量的值

Code
1
2
3
4
5
6
7
8
let x = 1; let y = 2; 
// 不好
let temp;
temp = x;
x = y;
y = temp;  
// 好
[x, y] = [y, x]; // 交换变量

 

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

Code
1
2
3
4
5
6
const arr = [1, 2, 3, 4, 5]; 
// 不好
const one = arr[0];
const two = arr[1];  
// 好
const [one, two] = arr;

 

数组

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

 

采用Array.from进行转换

Code
1
2
3
4
5
6
7
8
// 不好
    function foo() {
       let args = Array.prototype.slice.call(arguments);
    }  
   // 好
   function foo() {
      let args = Array.from(arguments);
   }

 

  • 数组去重

结合Set结构与Array.from

使用indexOf，HashTable等形式，不够简洁清晰

1
2
3
4
// 好
function deduplication(arr) {
   return Array.from(new Set(arr));
}

 

  • 数组拷贝

采用数组扩展...形式

Code
1
2
3
4
5
6
7
8
9
const items = [1, 2, 3]; 
// 不好
const len = items.length;
let copyTemp = [];
for (let i = 0; i < len; i++) {  
copyTemp[i] = items[i];
}  
// 好
let copyTemp = [...items];

 

  • 将一组数值转为数组

采用Array.of进行转换

1
2
3
4
5
6
// 不好
let arr1 = new Array(2); // [undefined x 2]
let arr2 = new Array(1, 2, 3); // [1, 2, 3]  
// 好
let arr1 = Array.of(2);  // [2]
let arr2 = Array.of(1, 2, 3); // [1, 2, 3]


函数

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

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

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
// 不好
const foo = function(x) {  
    console.log(foo.name); // 返回'' ，函数表达式默认省略name属性
}; 
[1, 2, 3].map(function(x) {  
    return x + 1;
}); 
var testObj = {  
    name: 'testObj',  
    init() {    
   var _this = this;
   // 保存定义时的this引用    
   document.addEventListener('click', function() {      
   return _this.doSth();    
   }, false);  
},  
doSth() {    
    console.log(this.name);  
    }
}; 
// 好
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);  
    }
};

 

  • 箭头函数书写约定

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

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

1
2
3
4
5
6
// 好
const foo = x => x + x; // 注意此处会隐性return x + x 
const foo = (x) => {  
return x + x; // 若函数体有花括号语句块时须进行显性的return
};  
[1, 2, 3].map( x => x * x);

 

  • 用箭头函数返回一个对象，应用括号包裹
1
2
3
4
// 不好
let test = x => { x: x }; // 花括号会变成语句块，不表示对象  
// 好
let test = x => ({ x: x }); // 使用括号可正确return {x:x}

l        立即调用函数 IIFE

1
2
3
4
5
6
7
8
// 不好
function foo(opts) {
   opts = opts || {};// 此处有将0，''等假值转换掉为默认值的副作用
}  
// 好
function foo(opts = {}) {
   console.log('更加简洁，安全');
}

 

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

更加简洁

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 不好
const shopObj = {
   des: '对象模块写法',
   foo: function() {
     console.log(this.des);
   }
}; 
const shopObj = {
   des: '对象模块写法',
   foo: () => {
     console.log(this.des); // 此处会变成undefined.des，因为指向顶层模块的this  
}
}; 
// 好
const des = '对象模块写法'; // 使用对象属性值简写方式
const shopObj = {
   des,
   foo() {
console.log(this.des);
   }
 };

 

类

  •  类名应使用帕斯卡写法(PascalCased)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 好
class SomeClass {
  }
l        类名与花括号须保留一个空格间距
// 不好
class Foo{
   constructor(){
    // constructor
    }  
   sayHi()
    {
     // 仅保留一个空格间距
    }
}  
// 好
class Foo {
   constructor() {
    // constructor  
    }
  sayHi() {
  // 仅保留一个空格间距
  }
}

 

  • 定义类时，方法的顺序如下：
    1. constructor
    2. public get/set 公用访问器，set只能传一个参数
    3. public methods 公用方法，公用相关命名使用小驼峰式写法(lowerCamelCase)
    4. private get/set 私有访问器，私有相关命名应加上下划线 _ 为前缀
    5. private methods 私有方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 好
 class SomeClass {
   constructor() {
// constructor  
}
 get aval() {
     // public getter
   }
 set aval(val) {
     // public setter
   }   
doSth() {
     // 公用方法
   }
 get _aval() {
     // private getter
   }
 set _aval() {
     // private setter  
}   
_doSth() {
     // 私有方法
   }
}

 

  • 如果不是class类，不使用new
1
2
3
4
5
6
7
8
// 不好
 function Foo() {
  }
const foo = new Foo();  
// 好
class Foo {
  }
const foo = new Foo();

 

  • 使用真正意思上的类Class写法，不使用prototype进行模拟扩展
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Class更加简洁，易维护
// 不好
function Dog(names = []) {
   this._names = [...names];
 }
Dog.prototype.bark = function() {
   const currName = this._names[0];
   alert(`one one ${currName}`);
 } 
// 好
class Dog {
   constructor(names = []) {
this._names = [...names];
 }
   
bark() {
     const currName = this._names[0];
     alert(`one one ${currName}`);
   }
 }

 

  • this的注意事项

子类使用super关键字时，this应在调用super之后才能使用

可在方法中return this来实现链式调用写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Foo {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
} 
// 不好
class SubFoo extends Foo {
   constructor(x, y, z) {
this.z = z; // 引用错误
super(x, y);
       }
}  
// 好
class SubFoo extends Foo {
   constructor(x, y, z) {
     super(x, y);
     this.z = z; // this 放在 super 后调用
   }
   setHeight(height) {
     this.height = height;
     return this;
   }
    }

 

模块

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

跟着标准走的人，运气总不会太差

1
2
3
4
5
6
// 不好
const colors  = require('./colors');
module.exports = color.lightRed;  
// 好
import { lightRed } from './colors';
export default lightRed;

 

  •  import / export 后面采用花括号{ }引入模块的写法时，须在花括号内左右各保留一个空格
1
2
3
4
5
// 不好
import {lightRed} from './colors';
import { lightRed} from './colors'; 
// 好
import { lightRed } from './colors';

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/alexjie-123/p/6096604.html