【react学习】关于react框架使用的一些细节要点的思考

class MyComponent extends React.Component{
   constructor(props) {
     super(props)
     this.state ={
     value:0
        }
   }
handleClick = () => {
      this.setState({value:1})
           console.log(‘在handleClick里输出‘ + this.state.value);
}
render(){
           console.log(‘在render()里输出‘ + this.state.value);
return (<div>
          <button onClick ={this.handleClick}>按钮</button>
        </div>)
      }
}
export default MyComponent
//省略渲染过程，下面也一样

handleStateChange1 = () => {
       this.setState({value:1})
       console.log(‘在handleClick里输出‘ + this.state.value);
}
handleStateChange2 = () => {
       this.setState({value:2})
       console.log(‘在handleClick里输出‘ + this.state.value);
}
handleStateChange3 = () => {
       this.setState({value:3})
       console.log(‘在handleClick里输出‘ + this.state.value);
}
handleClick = () => {
      this.handleStateChange1();
      this.handleStateChange2();
      this.handleStateChange3();
}

2.如何在子组件中改变父组件的state呢？

class Son extends React.Component{
  render(){
       return(<div onClick = {this.props.handleClick}>
                {this.props.value}
              </div>)
          }
}
class Father extends React.Component{
    constructor(props){
          super(props)
          this.state ={
                value:‘a‘
               }
       }
    handleClick = () => {
         this.setState({value:‘b‘})
      }
    render(){
         return (<div style ={{margin:50}}>
                     <Son value = {this.state.value} handleClick = {this.handleClick}/>
                 </div>)
         }
}

class Son extends React.Component{
  render(){
      return (<h3 style ={{marginTop:30}}>我从我的爷爷那里得到了基因--{this.props.gene}</h3>)
     }
 }
class Father extends React.Component{
  render(){
      return (<Son gene = {this.props.gene}/>)
    }
}
class GrandFather extends React.Component{
  constructor(props) {
     super(props)
     this.state ={
       gene:‘[爷爷的基因]‘
       }
   }
  render(){
     return (<Father gene = {this.state.gene}/>)
    }
}

class Son extends React.Component{
   render(){
      console.log(this.context.color);
      return (<h3 style ={{marginTop:30}}>我从我的爷爷那里得到了基因--{this.context.gene}</h3>)
      }
}
Son.contextTypes ={
      gene:React.PropTypes.string
}
class Father extends React.Component{
   render(){
      return (<Son/>)
      }
}
class GrandFather extends React.Component{
   getChildContext(){
      return {gene:‘[爷爷的基因]‘}
   }
   render(){
      return (<Father />)
   }
}
GrandFather.childContextTypes = {
      gene: React.PropTypes.string
};
export default GrandFather

const PropTypes = require("Prop-Types");
GrandFather.childContextTypes = {
     gene: PropTypes.string
};