【react】react入门

参考：http://www.ruanyifeng.com/blog/2015/03/react.html
      http://www.css88.com/react/docs/getting-started.html
      http://wiki.jikexueyuan.com/project/react/event-system.html

			【HTML模板】
<script src="react.min.js"></script>
<script src="react-dom.js"></script>

<div id="example"></div>

<script src="build/js/index.js"></script>

			【编译】
npm install -g react-tools
jsx --watch jsx/ build/js/



			【ReactDOM.render()】
ReactDOM.render(  //遇到html标签则以html解析，遇到{}则以js解析  //顶层标签必须唯一、单标签必须带'/'

	(function(){
		//......
		var name = 'sam';
		return <div>Hello, {name}!</div>
	})(),

	(function(){
		//......
		return element;
	})()
	
);



			【组件(component)】
var HelloMessage = React.createClass({  //首字母大写、必须有render方法并且return时顶层标签必须唯一
	getDefaultProps: function(){
		return {
			age: 29
		};
	},
	getInitialState: function(){
		return {open: false};
	},
	propTypes: {  //验证
		name: React.PropTypes.string.isRequired ???
	},
	click: function(){
		this.refs.input.className="xxx";
		this.setState({open: true});
	},
	render: function(){
		return(
			<div className="class">

				<h1 htmlFor="for" onClick={this.click}>Hello, {this.props.name}!</h1>
				<input style={{width: 100, color: #000}} ref="input" onChange={...} />

				//组件内部的节点(包括文本节点)
				//可能值：undefined/object/array，使用相关方法避免判断:React.children.map(this.props.children, function(child){})
				{this.props.children}

			</div>
		)
	}
});

ReactDOM.render(
	<div class="class">
		<HelloMessage name="sam" />
		<HelloMessage>
			1111
			<span>2222</span>
			3333
			<span>4444</span>
			<span>5555</span>
		</HelloMessage>
	</div>,
	element
);

//插入真实DOM
Mounting
	componentWillMount( f(){} )
	componentDidMount( f(){} )

//重新渲染
Updating
	componentWillReceiveProps: function(nextProps){} ) --- 收到新的Props时    //setState()不会引起第二次render() ???
	shouldComponentUpdate: function(nextProps, nextState){ return true; } ) --- 收到新的Props或State时    //返回true时才会render() ???

	componentWillUpdate: function(nextProps, nextState){} ) --- 收到新的Props或State时，并且render()之前
	componentDidUpdate: function(nextProps, nextState){} ) --- 收到新的Props或State，并且render()之后

//移出真实DOM
Unmounting
	componentWillUnmount( f(){} ) ???