使用React Context进行状态管理（七）使用contex

React 16.6中加入了一个新功能，contextType，就是不使用Consumer也能使用Provider中的共享变量。

譬如Menu.js中的UserConsumer，我们来看看如何在不使用它的情况下访问user和onLogout变量。

首先在Menu组件中声明一个静态变量contextType，并把整个UserContext赋值给它：

class Menu extends React.Component {
  static contextType = UserContext
//以下代码省略

由于使用了UserContext，我们要修改下UserContext中的代码，保存一份完整的Context：

let UserContext
const { Provider, Consumer } = UserContext = React.createContext();
/*---中间代码省略---*/
//导出
export { UserProvider, Consumer as UserConsumer, UserContext }

再回到Menu组件代码中，改写render函数：

render() {
    const { user, onLogout } = this.context
    return (
      <div>
        <img
          src={user.avatar}
          onClick={this.toggleMenu}
          ref={this.avatarRef}
          className="UserAvatar"
          alt="avatar"
        />
        {this.state.visible && (
          <ul>
            <li onClick={onLogout}>退出登录</li>
          </ul>
        )}
      </div>
    )
  }

在render函数中，我们可以使用this.context来获取共享变量，这样UserConsumer就可以删掉不用了。

contextType有两个注意事项：

1. 只能在类组件中使用
2. 如果一个组件使用了两个Consumer，只对其中一个有效。也就是说，contextType有且只能有一个。