react中的context为什么存在以及使用方法

context为什么存在以及使用方法

在react中如果父级组件向子级组件传递state状态的时候，需要在子组件上添加一个属性里面就是需要传递的状态的值(代码如下所示)

<WrappedComponent data={this.state.data}> 

子组件在接收传递过来的值的时候，需要通过props接收(props.data)里面的data就是父级组件设定的属性名

this.props.data//接收一个data属性值

所以在react真实项目中，组件不会单纯的只有两三个，组件太多而且需要一个状态在不同的组件层级中显示相同的状态，传递state就相当的麻烦。所以就需要将这个状态放在一个公共的地方进行共享，React.js的context就是这么一个东西，某个组件只要往自己的context里面放了某些状态，这个组件下的所有子组件就可以直接访问这个组件而不需要通过中间组件进行传递，但是父组件访问不到。

在父组件中定义

static childContextTypes={//验证getChildContext返回的对象
    themeColor=PropTypes.string
}
getChildContext(){//返回的对象就是context
    return{temeColor:this.state.color}
}

在子组件中定义和调用

static contextTypes={//子组件中想要获取context中的内容就必须这样进行定义
    themeColor=PropTypes.string
}
//this.context.themeColor这样获取context的值