项目代码和最新内容，请在我的github阅读,请注意该文件夹下4个可以运行的例子。欢迎您star,issue

对于React的context的基本用法可以参考我的: react的context更新而组件不更新的解决方案。

首先：我们来介绍一个高阶函数，该函数对我们的原始组件进行装饰，并提供了访问应用context中的相应声明：

Inject.contextTypes = {
    data: React.PropTypes.object,get: React.PropTypes.func,register: React.PropTypes.func
  };

其实这相当于指明了应用的store签名，之所以以HOC的方式来指明是因为这样的话，每一个组件都可以通过该方法来访问context中的内容，而不用在每一个组件中都声明contextTypes。下面是函数的签名：

//wire.js@H_502_13@
import React from 'react'@H_502_13@;
/** * [wire description] * @param {[type]} Component 我们的组件Component的class * @param {[type]} dependencies 在context中那些属性是要被作为props传递到我们的最终的组件中的 * @param {[type]} mapper 对我们要传入到组件的属性进行进一步的处理 * @return {[type]} [description] * 该方法的调用方式如下: * wire(Title,['config'],function (config) { return { title: config.name }; }); */@H_502_13@
export default@H_502_13@ function@H_502_13@ wire@H_502_13@(Component,dependencies,mapper)@H_502_13@ {@H_502_13@
  class@H_502_13@ Inject extends React.Component {
    render() {
      var@H_502_13@ resolved = dependencies.map(this@H_502_13@.context.get.bind(this@H_502_13@.context));
      //这是我们的context中的自己关心的那一部分内容@H_502_13@
      var@H_502_13@ props = mapper(...resolved);
       //将我们自己关心的那一部分数据放入到我们的mapper函数中继续处理成为我们Component最终的props@H_502_13@
      return@H_502_13@ React.createElement(Component,props);
    }
  }
  //这是我们的dependencies的内部签名，但是是通过高阶组件的方式来定义的，所以通过wire方法处理的组件都是可以获取@H_502_13@
  //到我们最外层的App组件中在context中声明的对象的@H_502_13@
  Inject.contextTypes = {
    data: React.PropTypes.object,register: React.PropTypes.func
  };
  return@H_502_13@ Inject;
};

到了这里我们先来看一下我们的context中的数据结构：

//dependencies.js@H_502_13@
export default@H_502_13@ {
  data: {},get(key) {
    return@H_502_13@ this@H_502_13@.data[key];
  },register(key,value) {
    this@H_502_13@.data[key] = value;
  }
};

也就是说我们所有的context中的数据是一个对象，但是该对象有get方法和register方法来向context中注册数据。

接下来我们看看组件中如何使用上面这个函数：

export default@H_502_13@ {
  name: 'React in patterns'@H_502_13@
};

上面是我们应用的配置信息。

//App.js@H_502_13@
import React from 'react'@H_502_13@;
import ReactDOM from 'react-dom'@H_502_13@;
import Header from './Header.jsx'@H_502_13@;
//Header对象@H_502_13@
import CONFIG from './config'@H_502_13@;
import dependencies from './dependencies'@H_502_13@;
//这样我们的context中已经注册了config对象了@H_502_13@
dependencies.register('config'@H_502_13@,CONFIG);
//CONFIG对象是如下签名：@H_502_13@
//{@H_502_13@
// name: 'React in patterns'@H_502_13@
// };@H_502_13@
class@H_502_13@ App extends React.Component {
  getChildContext() {
    return@H_502_13@ dependencies;
  }
  render() {
    return@H_502_13@ <Header@H_502_13@ />@H_502_13@;@H_502_13@
  }
};
//这是我们放入到context中的dependencies对象@H_502_13@
App.childContextTypes = {
  data: React.PropTypes.object,register: React.PropTypes.func
};
ReactDOM.render(<App@H_502_13@ />@H_502_13@,document.querySelector('#container'));@H_502_13@

也就是说，我们在最上层的组件的context中注册了我们应用所需要的配置信息，然后逐层向下传递。我们看看Header.js的内容

import React from 'react'@H_502_13@;
import Title from './Title.jsx'@H_502_13@;
//Header组件里面继续使用Title组件@H_502_13@
export default@H_502_13@ function@H_502_13@ Header@H_502_13@()@H_502_13@ {@H_502_13@
  return@H_502_13@ (
    <header@H_502_13@>@H_502_13@ <Title@H_502_13@ />@H_502_13@ </header@H_502_13@>@H_502_13@ ); }@H_502_13@

我们继续来看看Title.js的内容：

import React from 'react'@H_502_13@;
import wire from './wire'@H_502_13@;
function@H_502_13@ Title@H_502_13@(props)@H_502_13@ {@H_502_13@
  return@H_502_13@ <h1@H_502_13@>@H_502_13@{ props.title }</h1@H_502_13@>@H_502_13@;@H_502_13@
}
//Title组件必须指定Title.proTypes@H_502_13@
Title.propTypes = {
  title: React.PropTypes.string
};
//这是我们最深层次的组件实例@H_502_13@
export default@H_502_13@ wire(Title,['config'@H_502_13@],function@H_502_13@ (config)@H_502_13@ {@H_502_13@
  return@H_502_13@ { title: config.name };
});

到了这里，你应该更多的关注于wire方法。在wire方法里面，我们通过HOC的方式来实现了contextTypes。因此，经过包装@H_403_207@的Title组件是可以获取到context中的所有信息的。其首先获取到config属性，该属性在App组件中通过register方法进行了注册，获取到config以后我们会将config对象传入到mapper中，从而返回了我们Component需要的props属性，即 {title: config.name}。这样的话，我们的Componet就可以根据这些props属性进行UI渲染了。