使用React Context进行状态管理（七）使用contextType移除Consumer

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 (
      

        
        {this.state.visible && (
          

            
退出登录
          
        )}
      
    )
  }

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

contextType有两个注意事项：

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