Context 的目的是对于全局的需要多处使用的数据，不希望通过 prop 一层层传递下去，而是可以直接使用。

childContextTypes & getChildContext

该方案在 16.3 后不再是推荐方案。

React 最初提供的 context 方案是提供 context 数据的组件通过静态的 childContextType 来定义 context 中各字段的数据类型，通过 getChildContext 成员方法来提供实际的 context 数据，其中，返回的数据可以搭配 prop 和 state 来提供响应式的数据。而消费 context 数据的组件通过静态的 contextTypes 来指定需要消费的 context 字段的类型集合，然后即可通过 this.context[fieldName] 来使用。

注意，消费 context 的组件只需要定义需要的字段的类型即可，不需要是全部。同时，也不需要是提供 context 的组件的直接子组件。

import PropTypes from 'prop-types';

class Button extends React.Component {
  static contextTypes = {
    color: PropTypes.string
  };

  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  static childContextTypes = {
    color: PropTypes.string
  };

  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

继续阅读 →