Context

在React中，在React组件中很容易追踪数据流。当你观察组件时，你可以找出哪些属性(props)被传递，这使得你的应用非常容易理解。

在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性。你可以直接在React中使用强大的context API解决上述问题。

为什么不要使用Context

绝大多数的应用程序不需要使用context。

如果你希望使用应用程序更加稳定就不要使用context。这只是一个实验性的API并且可能在未来的React版本中移除。

如果你不熟悉React或者Mobx这类state管理库，就不要使用context。对于许多应用程序，上述库和state绑定是管理state不错的选择。Redux相比context是更好的解决方法。

如果你不是一个有经验的React开发者，就不要使用context。更好的方式是使用props和state。

如果你不顾这些警告仍然坚持使用context，尝试着将context的使用隔离在一个将小的范围内，并且在可能的情况下直接使用context，以便在API改变的时候进行升级。

如何使用Context

假定有下面的结构:

  1. class Button extends React.Component {
  2.   render() {
  3.     return (
  4.       <button style={{'{{'}}background: this.props.color}}>
  5.         {this.props.children}
  6.       </button>
  7.     );
  8.   }
  9. }
  11. class Message extends React.Component {
  12.   render() {
  13.     return (
  14.       <div>
  15.         {this.props.text} <Button color={this.props.color}>Delete</Button>
  16.       </div>
  17.     );
  18.   }
  19. }
  21. class MessageList extends React.Component {
  22.   render() {
  23.     const color = "purple";
  24.     const children = this.props.messages.map((message) =>
  25.       <Message text={message.text} color={color} />
  26.     );
  27.     return <div>{children}</div>;
  28.   }
  29. }

在这个例子中，我们手动地传递color属性使得Button和Message设置正确的样式。使用context，我们可以自动在组件树中传递属性。

  1. class Button extends React.Component {
  2.   render() {
  3.     return (
  4.       <button style={{'{{'}}background: this.context.color}}>
  5.         {this.props.children}
  6.       </button>
  7.     );
  8.   }
  9. }
  11. Button.contextTypes = {
  12.   color: React.PropTypes.string
  13. };
  15. class Message extends React.Component {
  16.   render() {
  17.     return (
  18.       <div>
  19.         {this.props.text} <Button>Delete</Button>
  20.       </div>
  21.     );
  22.   }
  23. }
  25. class MessageList extends React.Component {
  26.   getChildContext() {
  27.     return {color: "purple"};
  28.   }
  30.   render() {
  31.     const children = this.props.messages.map((message) =>
  32.       <Message text={message.text} />
  33.     );
  34.     return <div>{children}</div>;
  35.   }
  36. }
  38. MessageList.childContextTypes = {
  39.   color: React.PropTypes.string
  40. };

通过给MessageList添加childContextTypes和childContextTypes(context提供者)，React自动地向下传递信息，任何子树(例如:Button)可以通过定义contextTypes访问到属性。

如果没有定义contextTypes,context将是一个空的object。

父子耦合

Context可以构建API使得父组价和子组件进行相互通信。例如：React Router V4工作机制如下:

  1. import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  3. const BasicExample = () => (
  4.   <Router>
  5.     <div>
  6.       <ul>
  7.         <li><Link to="/">Home</Link></li>
  8.         <li><Link to="/about">About</Link></li>
  9.         <li><Link to="/topics">Topics</Link></li>
  10.       </ul>
  12.       <hr />
  14.       <Route exact path="/" component={Home} />
  15.       <Route path="/about" component={About} />
  16.       <Route path="/topics" component={Topics} />
  17.     </div>
  18.   </Router>
  19. );

通过从Router中传递相关信息，Router中的每一个Link和Route都可以与之通信。

在你构建包含类似于上述的API的组件之前，考虑是否有其他的更清晰的选择。例如，你可以传递整个React组件作为props传递。

在生命周期函数中使用Context

如果contextTypes在组件中定义，下列的生命周期函数将接受一个额外的参数:context对象

在无状态的函数式组件中使用Context

如果contextType被定义为函数的属性，无状态函数式组件也能够引用context。下面的代码演示了一个Button状态的函数式组件。

  1. const Button = ({children}, context) =>
  2.   <button style={{'{{'}}background: context.color}}>
  3.     {children}
  4.   </button>;
  6. Button.contextTypes = {color: React.PropTypes.string};

更新Context

别这么做！

React有一个API更新context，但是它打破了基本流程，不应该使用。

getChildContext函数将会在每次state或者props改变时调用。为了更新context中的数据，使用this.setState触发本地状态的更新。这将触发一个的context并且数据的改变可以被子元素收到。

  1. class MediaQuery extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {type:'desktop'};
  5.   }
  7.   getChildContext() {
  8.     return {type: this.state.type};
  9.   }
  11.   componentDidMount() {
  12.     const checkMediaQuery = () => {
  13.       const type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
  14.       if (type !== this.state.type) {
  15.         this.setState({type});
  16.       }
  17.     };
  19.     window.addEventListener('resize', checkMediaQuery);
  20.     checkMediaQuery();
  21.   }
  23.   render() {
  24.     return this.props.children;
  25.   }
  26. }
  28. MediaQuery.childContextTypes = {
  29.   type: React.PropTypes.string
  30. };

问题在于，组件提供的context值改变，后代元素如果shouldComponentUpdate返回false那么context的将不会更新。这使得使用context的组件完全失控，所以基本上没有办法可靠的更新context。@mweststrate/how-to-safely-use-react-context-b7e343eff076">这篇blog很好的解释了为什么这是一个问题并如果绕过它。