杨小福|Nerver stop thinking

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>

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

......查看全文

驼峰式命名 + 首字母大写

基于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函数

Yangxiaofu

html不能这么写，你知道吗？