基于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

demo效果同上！这个时候你发现，我们在<GrandFather>组件和<Father>组件中都没有向下传递props，我们就从最下层的Son组件中获取了gene属性，是不是很方便！

getChildContext()是你在顶层组件中定义的钩子函数，这个函数返回一个对象——你希望在后代组件中取用的属性就放在这个对象中，譬如这个例子中我希望在Son组件中通过this.context.gene取属性，所以在getChildContext()中返回{gene:'[爷爷的基因]'}

GrandFather.childContextTypes和Son.contextTypes 用于规定顶层组件和取顶层组件context的后代组件的属性类型

有图有真相之context和props的区别

虽然上面这个例子说明了context多么好用，但注意：官方并不推荐经常使用它，因为它会让你的应用架构变得不稳定(官方文档原话If you want your application to be stable, don't use context),在我看来，为什么在大多数情况下要使用props而不是实现数据流呢，因为props凭借组件和组件间严密的逻辑联系，使得你能够清晰地跟踪应用的数据流(it's easy to track the flow of data through your React components with props)当然了，如果你遇到上述的例子的情况，context还是大有裨益的

getChildContext(){
  return {type:this.state.type}
}

3.4在上述我限制gene的类型时候我是这样写的：gene: React.PropTypes.string，使用了React内置的React.PropTypes帮助属性，此时我的版本为 "react": "15.4.2",在15.5的版本后这一帮助属性被废弃，推荐使用props-types库，像这样：

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

当然，在这之前你需要npm install prop-types

这得根据它是否需要实时的重渲染决定，如果该变量需要同步到变化的UI中，你应该把它放在this.state对象中，如果不需要的话，则把它放在this中（无代码无demo）