012|React之Context

假设有层级 A->B->C->D，如果A需要传递一个参数给D，根据前文的知识，只能通过props参数一层一层传递。

有没有更便捷的方法呢？React提供了context机制来解决这个问题。
context涉及到父级（发送方）和子级（接收方），父级设置context，子级读取context。

我们先来看一下父级的一个实现：

class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  } // 此具返回childContext具体值

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

MessageList.childContextTypes = {  // 通过childContextTypes定义context中变量类型
  color: PropTypes.string
};

父级通过childContextType来定义context中的类型，以及通过getChildContext来返回context的具体value。

再来看一下子级如何获取父级设置的context：

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}> // 使用context
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = { // 定义接收context
  color: PropTypes.string
};

子级通过contextTypes来标识自己接收context，然后就能直接使用context了。
如果子级没有定义contextTypes，则context对象将为空。另外，如果定义了contextTypes，以下回调中都会添加一个新参数context参数：

constructor(props, context)
componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)
componentDidUpdate(prevProps, prevState, prevContext)

最后，函数式组件中，通过定义contextType也能使用context：

const PropTypes = require('prop-types');

const Button = ({children}, context) =>
  <button style={{background: context.color}}>
    {children}
  </button>;

Button.contextTypes = {color: PropTypes.string};

因为函数式组件不支持state、ref，一般不建议使用函数式组件。

想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。