[译]React Context

欢迎各位指导与讨论 : ）

　　前言

　　　　由于笔者英语和技术水平有限，有不足的地方恳请各位指出。我会及时修正的 O(∩_∩)O 当前React版本 15.0.1 时间 2016/4/25

　　正文

　　　　React一个最大的优点是，我们非常容易跟踪React组件之间的数据流动。当我们观察一个组件的时候，我们能够容易、清晰地得知哪一些props正被传输。基于这一点，也使我们的代码易懂。但是也有一种情况，当我们想在组件树内部传递props，并且不想让props流经树的每一层，Context会让我们做到这一点。

　　　　注：Context是一个先进易变的特性，它的API很可能会在未来的版本里改动。

　　　　当然，绝大多数应用无需使用到Context。因为使用Context会我们的代码变得难懂，耦合度增强，复用性降低，同时也让组件间的数据流动变得不够清晰。Context就像我们在应用中使用全局变量一样。我们应当谨慎使用Context。下面是一个例子

var Button = React.createClass({
  contextTypes: {
    color: React.PropTypes.string
  },
  render: function() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
});
 
var Message = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
});
 
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 <Message text={message.text} />;
    });
    return <div>{children}</div>;
  }
});

　　　　在这个例子中，通过向MessageList(context provider)增加 childContextTypes 和 getChildContext，React 能够自动地把信息(数据)向所有设置了 contextTypes 的子树进行传递。如果 contextTypes 在子组件中还没有定义，那 this.context将会是一个空对象。若 contextTypes 已经在子组件中定义好了，那在组件接下来的生命周期里将多增加一个参数: context对象

　　　　当一个无状态函数型的组件中定义好一个property并且设置好了 contextTypes ，那该函数也能够成功引用 context 对象

function Button(props, context) {
  return (
    <button style={{background: context.color}}>
      {props.children}
    </button>
  );
}
Button.contextTypes = {color: React.PropTypes.string};

　　　　那我们应该怎么更新组件的 Context 呢。答案是，把 Context 和组件的 State关联起来，当组件的state或者props改变的时候，getChildContext函数会自动调用，更新Context 并把这个新的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的最佳应用情景应该是像用户登录、应用语言或者是应用主题的这一类情景，这些都是真实的全局变量。

　　　　建议不要使用Context在组件中传输我们的model data，之前的写法才会让代码简单易懂。