Contexts 是React的一个重要属性，但是到目前为止，这个属性在正式的文档里面还没有对它进行正式介绍，在 reactv0.1.4将会正式发布这个属性。下面先来介绍一下它的使用方式。
React.withContext会执行一个指定的上下文信息的回调函数,任何在这个回调函数里面渲染的组件都有这个context的访问权限。
varA = React.createClass({
contextTypes: {
name: React.PropTypes.string.isRequired,
},
render:function(){
return
My name is: {this.context.name}
;}});React.withContext({'name':'Jonas'},function(){// Outputs: "My name is: Jonas"React.render(
, document.body);});
任何想访问context里面的属性的组件都必须显式的指定一个contextTypes的属性。如果没有指定改属性，那么组件通过 this.context 访问属性将会出错。
如果你为一个组件指定了context，那么这个组件的子组件只要定义了contextTypes 属性，就可以访问到父组件指定的context了。
varA = React.createClass({ render:function(){return;}});varB = React.createClass({ contextTypes: { name: React.PropTypes.string }, render:function(){return
My name is: {this.context.name}
;}});React.withContext({'name':'Jonas'},function(){ React.render(
, document.body);});
为了减少文件的引用，你可以为contextTypes放到一个minx 中，这样 用到的组件引用这个minx就行了。
varContextMixin = { contextTypes: { name: React.PropTypes.string.isRequired }, getName:function(){returnthis.context.name; }};varA = React.createClass({ mixins: [ContextMixin], render:function(){return
My name is {this.getName()}
;}});React.withContext({'name':'Jonas'},function(){// Outputs: "My name is: Jonas"React.render(
, document.body);});
getChildContext
和访问context 的属性是需要通过contextTypes指定可访问的 元素一样。getChildContext指定的传递给子组件的属性需要先通过childContextTypes来指定，不然会产生错误。
// This code *does NOT work* becasue of a missing property from childContextTypesvarA = React.createClass({ childContextTypes: {// fruit is not specified, and so it will not be sent to the children of Aname: React.PropTypes.string.isRequired }, getChildContext:function(){return{ name:"Jonas", fruit:"Banana"}; }, render:function(){return;}});varB = React.createClass({ contextTypes: { fruit: React.PropTypes.string.isRequired }, render:function(){return
My favorite fruit is: {this.context.fruit}
;}});// Errors: Invariant Violation: A.getChildContext(): key "fruit" is not defined in childContextTypes.React.render(
, document.body);
假设你的应用程序有多层的context。通过withContext和getChildContext指定的context元素都可以被子组件引用。但是子组件是需要通过contextTypes来指定所需要的context 元素的。
varA = React.createClass({ childContextTypes: { fruit: React.PropTypes.string.isRequired }, getChildContext:function(){return{ fruit:"Banana"}; }, render:function(){return;}});varB = React.createClass({ contextTypes: { name: React.PropTypes.string.isRequired, fruit: React.PropTypes.string.isRequired }, render:function(){return
My name is: {this.context.name} and my favorite fruit is: {this.context.fruit}
;}});React.withContext({'name':'Jonas'},function(){// Outputs: "My name is: Jonas and my favorite fruit is: Banana"React.render(
, document.body);});
context 是就近引用的，如果你通过withContext指定了context元素，然后又通过getChildContext指定了该元素，该元素的值将会被覆盖。
varA = React.createClass({ childContextTypes: { name: React.PropTypes.string.isRequired }, getChildContext:function(){return{ name:"Sally"}; }, render:function(){return;}});varB = React.createClass({ contextTypes: { name: React.PropTypes.string.isRequired }, render:function(){return
My name is: {this.context.name}
;}});React.withContext({'name':'Jonas'},function(){// Outputs: "My name is: Sally"React.render(
, document.body);});
总结
通过context传递属性的方式可以大量减少 通过显式的通过props逐层传递属性的方式。这样可以减少组件之间的直接依赖关系。
