react-native 自定义组件规范
规范:
文件与组件命名:
- 扩展名: 使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomeView.component.js,HomeView.style.js,HomeView.action.js等。
- 文件名: 使用驼峰命名法且首字母大写，如HomeView.js。
- 组件命名: 与文件名（除中缀外）完全一致。如果组件单独放置在目录中，则目录名也一致。
组件声明：
使用class与extends关键字.不使用React.creatClass方法,需要导出的组件直接在clall关键字前使用exportdefault
引号
- 对于JSX的字符串属性使用双引号(")，其他情况下使用单引号。
// good
<Foo bar="bar" />
// good
<Foo style={{ left: '20px' }} />
空格
// bad
<Foo
/>
// good
<Foo />
state/props
读取state和props时,使用const与解构,必要时可使用let.不使用var
// bad
var userName = this.props.userName;
let checked = this.state.checked;
// good
const { userName, age, sex } = this.props;
const { checked } = this.state;
标签
- 对于没有子组件的JSX标签，始终自闭合
// good
<Foo className="stuff" />
- 如果组件有多行属性，则另起一行进行自闭合。
// good
<Foo
bar="bar"
baz="baz"
/>
方法声明的顺序
- 原则上按如下顺序排列React组件的各个方法（生命周期）
解构
- 3.2.1 若函数形参为对象时，使用对象解构赋值
function someFun(opt) {
let { opt1, opt2 } = opt;
console.log(`$(opt1) 加上 $(opt2)`);
}
- 3.2.2 若函数有多个返回值时，使用对象解构，不使用数组解构，避免添加顺序的问题
// 不好
function anotherFun() {
const one = 1, two = 2, three = 3;
return [one, two, three];
}
const [one, three, two] = anotherFun(); // 顺序乱了
// one = 1, two = 3, three = 2
// 好
function anotherFun() {
const one = 1, two = 2, three = 3;
return { one, two, three };
}
const { one, three, two } = anotherFun(); // 不用管顺序
- 3.3.1 交换变量的值
[x, y] = [y, x]; // 交换变量
- 5.1.1 箭头函数书写约定
函数体只有单行语句时，允许写在同一行并去除花括号
当函数只有一个参数时，允许去除参数外层的括号
- 5.1.2 用箭头函数返回一个对象，应用括号包裹
- 5.3 函数参数指定默认值
- 5.4 对象中的函数方法使用缩写形式
类
- 6.1.1 类名与花括号须保留一个空格间距
2017年5月26日
