React 中的Context

当我们想在组件树内传递props，并且不想让props流经树的每一层，context会让我们做到这一点。
context会让我们的代码变得难懂，耦合度增强，复用性降低，同时也让组件间的数据流动变得不够清晰。context就像我们全局中使用的全局变量一样。
var Button = React.createClass({
contextTypes: {
color: React.PropTypes.string
},
render: function() {
return (

{this.props.children}

);
}
});

var Message = React.createClass({
render: function() {
return (

{this.props.text} Delete

);
}
});

var MessageList = React.createClass({
childContextTypes: {
color: React.PropTypes.string
},
getChildContext: function() {
return {color: "purple"};
},
render: function() {
var children = this.props.messages.map(function(message) {
return ;
});
return

{children}

;
}
});
在这个例子中，通过向MessageList(context provider)增加了childContextTypes和getChildContext，React能够自动的把数据向所有设置了contextTypes的子树传递，如果contextTypes在子组件中没有定义，那this.context将会是一个空对象，若contextTypes在组件中已经定义好了，那在组件接下来的声明周期中将多增加一个参数context对象。
当一个无状态函数型的组件中定义好了一个property并且设置好了contextTypes，那该函数也能够成功引用context对象
function Button(props, context) {
return (

{props.children}

);
}
Button.contextTypes = {color: React.PropTypes.string};
如何更新context呢？答案是：把context和组件的state关联起来，当组建的state或者props改变的时候，getChildContext函数会自动调用，更新context和其他改变一起传递到子树。
var MediaQuery = React.createClass({
getInitialState: function(){
return {type:'desktop'};
},
childContextTypes: {
type: React.PropTypes.string
},
getChildContext: function() {
return {type: this.state.type};
},
componentDidMount: function(){
var checkMediaQuery = function(){
var type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
if (type !== this.state.type){
this.setState({type:type});
}
};

window.addEventListener('resize', checkMediaQuery);
checkMediaQuery();

},
render: function(){
return this.props.children;
}
});
大多数情况下，为了代码的清晰可观，我们应该尽量避免使用context。context的最佳应用场景是用户登录，应用语言或者应用主题这一类场景