react/react-native代码规范实践

驼峰式命名 + 首字母大写

  • 基于react本身的特性,组件命名首字母必须大写
  • Javascript本身类命名推荐首字母
  • 组件对应文件首字母大写并与组件名相对应
/*TopicComponent*/
class TopicComponent extends Component {}

对应的文件名推荐使用 TopicComponent

let/const 替代var

使用let/const而不是var,给所以变量加上块级作用域

四个空格缩进(若使用tab缩进可将tab设为4个空格)

语句必须分号结尾

声明语句运算符、括号前后加一个空格

/*变量声明*/
const name = 'react';
let myname = 'xiaofu';
let num = 1 + 1;

/*函数声明*/
function fetch (params) {
/**
* body
*/

}

/*对象声明*/
let topicData = {
msg: 'message',
data: [],
getData () {
/**
* body
*/

}
}

私有属性及方法加下划线前缀

建议一个class一个文件,单文件不要超过200行

单文件过大会带来阅读障碍,如果功能过于复杂,建议拆分为子类

文件名与class名保持一致

严格划分好实例属性、props、state,避免重复渲染

不要滥用 state,应该只将影响视图的值存放在 state 中,这样可以避免频繁的 state 操作以及渲染。

propTypes类型声明必须,并以es7 static关键字的格式声明

export default class TopicComponent extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
fetchData: PropTypes.func.isRequired
}

constructor (props) {
super(props);
}
}

state在构造函数中声明

export default class TopicComponent extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
fetchData: PropTypes.func.isRequired
}

constructor (props) {
super(props);

this.state = {

}
}
}

单行注释写在当前代码行的末尾,尽量保持当前文件所有单行注释对齐

多行注释按如下格式,紧贴所需注释代码上方,无需空行(注意空格)

/**
* 注释
*/

常量声明在class之前

import模块按类型划分在当前文件最前面部分,解构类型的导入一个空行分隔,与其它代码用两个空行分隔

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

import {
View,
Text,
StyleSheet,
NavigatorIOS,
ListView,
TouchableHighlight,
Image,
ActivityIndicator,
RefreshControl
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';
import moment from 'moment';


const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 64,
paddingBottom: 48,
backgroundColor: '#ffffff'
}
}

组件代码编写顺序

  • PropType声明
  • 静态属性
  • 实例属性
  • 构造函数(包含state)
  • 静态方法
  • 实例方法
  • 私有函数
  • 生命周期函数
  • render子函数以及render函数

html不能这么写,你知道吗?

  • a标签不可以嵌套交互式元素
  • 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素
  • p标签不能包含块级元素
  • 这些标签不可包含块级元素
  • li标签可以包含div以及ul,ul的子元素应该只有li
  • 元素并排(块级和块级并列,内联和内联并列)

标签错误嵌套

语法错误

  • a标签不可以嵌套交互式元素[a, audio(如果设置了controls属性), button, details, embed, iframe, img(如果设置了usemap属性), input(如果type属性不为hidden状态), keygen, label, menu(如果type属性为toolbar状态),object(如果设置了usemap属性), select, textarea, video(如果设置了controls属性)]
/*下面这些写法浏览器是不能够正常解析的*/
<a href="">
<a href="">click</a>
</a>
<a href="">
<button>click</button>
</a>
<a href="">
<input type="text">
</a>
<a href="">
<textarea name="" id="" cols="10" rows="5"></textarea>
</a>

click

有的虽然解析正常,但却达不到预想的目的

语义错误

页面可能正常解析,但不符合语义。这是因为浏览器自带容错机制,对于不规范的写法也能够正确的解析,各浏览器的容错机制不同,所以尽量按规范来写。

  • 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素
/*规范的写法*/
<div>
<h2>jikexueyuan</h2>
<p>IT education</p>
</div>
/*不规范的写法*/
<span>
<div>wrong</div>
</span>
  • p标签不能包含块级元素
/*不规范的写法*/
<p>
<h1></h1>
</p>
<p>
<div></div>
</p>
  • 如下的标签不可包含块级元素
h1、h2、h3、h4、h5、h6、p

/*不规范的写法*/
<h1>
<h2></h2>
</h1>
<h2>
<p></p>
</h2>
  • li标签可以包含div以及ul(这个是不是很牛,可以包含父级元素)
/*规范的写法*/
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</li>
/*不规范的写法*/
<ul>
<a href="">迷路的a标签</a>
<li></li>
<li></li>
<li></li>
</ul>
  • 元素并排(块级和块级并列,内联和内联并列)
/*规范的写法*/
<div>
<h2></h2>
<p></p>
</div>
<div>
<img src="" alt="">
<a href=""></a>
<span></span>
</div>

/*不规范的写法*/
<div>
<span>我是内联元素</span>
<p>我是块级元素</p>
</div>

如有错误,请指出,欢迎补充其它一些错误情况。

......查看全文

查看更多