react学习之路（二）

1、写一个简单的demo

class Son extends React.Component{
			constructor(props){
		        super(props);
		        
    		}			
			render(){
				return (
					<div>
						<span>{this.props.message}</span><br/>
						<input type="text" value={this.props.message} onChange={this.props.upstate} />
					</div>
				)
			}
		}

		class Father extends React.Component{
			constructor(props){
				super(props);
				this.state = {
					father_v : 'father',
				};
			}
			handleInput(e){
				this.setState({
					father_v : e.target.value,
				});
			}
			
			render(){
				return (
					<div>
						<Son message = {this.state.father_v} upstate = {this.handleInput.bind(this)}></Son>
					</div>
				)
			}
		}
		ReactDOM.render(<Father />,document.getElementById("app"))

最后的效果

通过onchange监听输入框输入，子组件通过

onChange={this.props.upstate}

调用父组件传过来的函数，然后用setState设置state，视图更新。

2、组件的生命周期

class Father extends React.Component{
			constructor(){
				super();
				this.state = {
					count : 1,
				};
				this.componentWillUnmount = this.componentWillUnmount.bind(this);
			}
			
			componentWillMount(){
				console.log("componentWillMount");
				let timer = setInterval(() => {
				this.setState({count:++this.state.count})}.bind(this) ,1000);
			}
			componentDidMount(){
				console.log("componentDidMount");
			}
			componentWillUnmount(){
				console.log("componentDidMount");
			}			
			componentWillUpdate(){
				console.log("componentWillUpdate");
			}
			componentDidUpdate(){
				console.log("componentDidUpdate");
			}
			killComponent(){
				ReactDOM.unmountComponentAtNode( document.getElementById("app") );
			}
			render(){
				return (
					<div>
						<button onClick = {this.killComponent.bind(this)}>卸载组件</button>
						<Son message = {this.state.count} ></Son>
					</div>
				);
			}
		}

		class Son extends React.Component{
			constructor(){
		        super();
		        
    		}	
    		componentWillReceiveProps(nextProp){
    			console.log("componentWillReceiveProps")
    		}	
    		shouldComponentUpdate(){
				console.log("shouldComponentUpdate");
				return true;
				
			}
			render(){
				return (
					<div>
						<span>{this.props.message}</span><br/>
					</div>
				)
			}
		}


		ReactDOM.render(<Father />,document.getElementById("app"))

网络请求可以componentDidMount中来执行，效果如下，数字隔一秒加一