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中来执行，效果如下，数字隔一秒加一