Context

注意： React.PropTypes 从 React v15.5 版本开始已经移入了一个不同的包中。 请使用 the prop-types library instead 去定义 contextTypes

我们提供一个 codemod script 来帮助自动转换

使用 Raect，可以很方便的跟踪 React 组件的数据流。当你浏览你的组件的时候，你可以看到那些 props 被传递，这可以使你的应用看起来更容易理解。

在某些情况下，你会希望通过组件树来传递数据的时候不需要在每一个级别的组件中传递 prop。你可以使用强大的 context API 来完成这个操作。

为什么使用 Context

译者注： 为了更好的理解 context API，并没有将 context 翻译成上下文

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

如果你希望你的应用程序是稳定的，请不要使用 context。它是一个实验性的 API，在将来的 React 版本中可能会移除。

如果你不熟悉像 Redux 或者是 MobX 这样的状态管理器，也请不要使用 context。对于许多实践中的应用来说，这些库以及他们和 React 的绑定是管理许多组件状态的不错的选择。Redux 可能是你目前遇到的问题的正确的解决方案，而不是 context。

如果你不是经验丰富的 React 开发人员，请不要使用 context，通常来说仅仅使用 props 和 state 来实现功能更好。

如果即使有上面这些警告，你还坚持使用 context 的话，尽量避免直接使用 context API，而是将其进行二次封装，以便于之后 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 的 prop 给 style，以便于用来设置 Button 和 Message 组件的样式。使用 context，我们能够自动的在组件树中传递：

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

通过给 MessageList (context 的提供者)增加 childContextTypes 和 getChildContext 方法，React 可以自动的在组件树中传递信息，并且子组件的任何组件（本例中是 Button）能够通过定义的 contextTypes 来访问。

如果 contextTypes 没有定义，则 context 是一个空对象。

父子组件耦合

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 组件中传递的一些信息，每一个 Link 和 Route 都能够回传给外层的 Router.

在使用榆次类似的 API 构建组件之前，请先考虑是否有其他更好的选择。比如，你可以把整个 React 组件作为 props 进行传递。

在组件声明中期的方法中使用 context

如果 contextTypes 是在组件中定义的，则下面的生命周期方法接收一个附加的参数，也就是 context 对象：

注意： React16 中，componentDidUpdate不在接收 prevContext

在没有 state 的 fcuntion 构建的组件中使用 Context

无状态的 function 构建的组件也能够使用 context ,只要 contextTypes 被定义为函数的属性即可。下面代码是使用 function 构建的无状态 Button 组件：

  1. import PropTypes from 'prop-types';
  3. const Button = ({children}, context) =>
  4.   <button style={{background: context.color}}>
  5.     {children}
  6.   </button>;
  8. Button.contextTypes = {color: PropTypes.string};

更新 context

不要这样做（Don’t do it.）

React 有一个用来更新 context 的 API ,但是它已经从根本上被否定了，你也不应该使用它。

当 state 和 props 发生更改时，会调用 getChildContext 方法。为了更新 context 中的数据，使用 this.setState 进行本地的 state 更新，这回触发一个新的 context，并且子组件会收到这些更改。

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

有一个问题，如果通过组件的更改来提供 context 值，在使用这个值的子组件的父组件中的 shouldComponentUpdate 返回 false ，则子组件不会发生更新。

这完全不受使用 context 的组件所控制，所以基本上也没有一个可靠的方法解决 context 的更新。这篇文章很好的解释了为什么这是一个问题，以及如何解决这个问题。