react之初体验

class Index extends Component{
	constructor(props){
		super(props);
		this.state = {
			foo : "bar"
		};
	};
	componentWillMount(){
		<!-- 会在render之前被调用，但是这个时候没有任何渲染出来的结果
			 即使调用this.setState修改状态也不会引发重新绘制
			 所有可以在这个函数里做的事情，都可以提前到constructor中间去做 -->
	};
	componentWillReceiveProps(nextProps){
		<!--只要父组件的render函数被调用，在render函数里被渲染的子组件也会经历更新过程
			不管父组件传给子组件的props改变没有都会触发子组件的componentWillReceiveProps
			注意：this.setState方法触发更新过程不调用此函数，因为此函数
			适合根据函数内部的新props值，也就是接受的参数来计算是不是要更新内部状态
			this.props表示上一次渲染时的props值，nextProps表示这一次传进来的props值
			进行对比，有变化时才调用this.setState方法更新内部状态 -->
	};
	shouldComponentUpdate(nextProps,nextState){
		return(nextProps.x !== this.props.x) || (nextState.y !== this.state.y);
		<!-- 此函数是除了render函数外在生命周期中最重要的函数
			 render决定该怎么渲染，此函数决定一个组件什么时候不需要渲染，render和此函数
			 也是react声明周期中唯二要求有返回值的函数
			 render函数返回值用于构造DOM对象，此函数返回一个布尔值，告诉react库
			 这个组件在这此次更新中是否要继续，并且先调用此函数在调用render -->
	};
	componentWillUpdate(){
		<!-- 类似componentWillMount -->
	};
	render(){
		return();
	};
	componentDidMount(){
		<!-- render函数被调用完了之后，此函数不会被立刻调用
			 此函数调用的时候，render函数返回的东西已经引发渲染，
			 组件已经被“装载”到DOM树上了，且此函数只在客户端调用-->
	};
	componentDidUpdate(){
		<!-- 此函数与componentDidMount不同处在于此函数不论在服务器端
			 还是客户端都会被调用，但正常情况下不在服务器端调用，如果
			 在服务器端被调用了，说明程序有错误 -->	
	};
	componentWillUnmount(){
		<!-- 卸载过程只涉及这一个函数，此函数的工作往往和componentDidMount
			 有关，如果在componentDidMount函数在用非react方法创造了一些DOM元素，
			 如果不清理掉可能造成内存外泄，所以会用到此函数清理这些DOM元素 -->
	}
};

Index.defaultProps = {
	return {
		indexProps : 0
	}
};

export default Index;

enter constructor First
enter componentWillMount First
enter render First

enter constructor Second
enter componentWillMount Second
enter render Second

enter constructor Third
enter componentWillMount Third
enter render Third

enter componentDidMount First
enter componentDidMount Second
enter componentDidMount Third

const Index = React.createClass({
	getInitialState : function(){
		return { foo : "bar" };
	},
	getDefaultProps : function(){
		return { indexProps : 0 };
	},
	render(){
		return();
	}
});

export default Index;

<MediaQuery query="(min-device-width: 1224px)">
    <PCIndex />
</MediaQuery>
<MediaQuery query="(max-device-width: 1224px)">
    <MobileIndex />
</MediaQuery>

<MediaQuery minDeviceWidth={1224}>
    <PCIndex />
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
    <MobileIndex />
</MediaQuery>

var arr1 = [1,2,3];
var arr2 = [...arr1,4,5,6];
console.log(arr2)  //1,2,3,4,5,6

var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1.push(...arr2);
console.log(arr1)  //1,2,3,4,5,6

var arr1 = [1,2,3];
arr1.push(4,5,6);
console.log(arr1)  //1,2,3,4,5,6

let [arg1,arg2,...arg3] = [1,2,3,4,5]
arg1//1
arg2//2
arg3//3,4,5