17、React 开发：组件复用、文档化与认证实现

React 开发：组件复用、文档化与认证实现

1. 复用 React 组件与 Apollo Consumer

在开发 React 应用时，我们常常需要在文件顶部导入所需组件，例如：

import UserBar from './user';
import { UserConsumer } from '../context/user';

通过这样的操作，我们能成功配置并使用 React Context API 来全局保存和读取数据。不过，除了这种通用方法，Apollo 也提供了自己的解决方案。

使用 Apollo Consumer 时，我们几乎可以保留之前所写的大部分代码，只需从 App 类中移除 UserProvider ，因为在使用 Apollo Consumer 时它不再必要。接着，打开 context 文件夹中的 user.js 文件，将其内容替换为以下代码：

import React, { Component } from 'react';
import { ApolloConsumer } from 'react-apollo';

export class UserConsumer extends Component {
  render() {
    const { children } = this.props;
    return (
      <ApolloConsu