react 数据操作

state 与 props 的相同之处

改变都会触发render函数（UI改变）

state 与props 的不同之处

• state(writeable,redable),props(readable只读)
• state(组件内部数据)，props(来自父组件)

上下文 PropTypes

实现了 父组件---->孙组件 的数据传递

import React,{Component} from 'react';
import PropTypes from 'prop-types'
//引入 PropTypes
class App extends Component{
  // 定义一个静态方法childContextTypes 这个是固定写法的
  static childContextTypes={
    color:PropTypes.string
}
  getChildContext(){
    return {color:'purple'}
  }
  render(){
    return(
      <div>
        app :
        {<Son1 ></Son1>}
      </div>
    )
  }
}
App.childContextTypes = {
  color:PropTypes.string
}
class Son1 extends Component{
  render(){
    return(
      <div>
        son1:
        <GrandSon1 ></GrandSon1>
      </div>
    )
  }
}

class GrandSon1 extends Component{
  static contextTypes={
    color:PropTypes.string
}
  render(){
    return(
      <div>
        GrandSon1
        {this.context.color}
      </div>
    )
  }
}
GrandSon1.contextTypes = {
  color:PropTypes.string
}

export default App;