为什么要使用apollo？
没有redux繁琐的action、reducer、dispatch……让全局管理store变得简单、直白！

使用redux管理状态，重心是放在如何去拿数据上；而apollo把重心放在需要什么数据上。理解这一点非常重要！

好了，废话不多说，我们立即开始！

准备工作

创建React项目

1. 你可以使用create-react-app快速创建一个React应用，不熟悉create-react-app的小伙伴可以先行了解。

1
2
3
4
5
6
7

npm i create-react-app -g

create-react-app react-apollo-client-demo --typescript

cd react-apollo-client-demo

npm start

2. 也可以在codesandbox上在线搭建React项目。方便快捷！

搭建GraphQL服务

1. 你可以在github上fork graphpack项目，然后使用github账号登录codesandbox并导入该项目，即可零配置搭建一个在线的GraphQL服务。
   本文档在编写时在codesandbox上搭建了一个服务，可供参考：https://kdvmr.sse.codesandbox.io/
2. 也可以在本地搭建自己的GraphQL服务，因不在本文档讨论范围，所以暂不提供搭建步骤。

安装需要的包

既然本文讲的是graphql + react + apollo开发React App，所以需要安装以下包来支撑，以前使用的redux、react-redux等包可以丢到一边了。

PS：在apollo 1.0时代，本地状态管理功能（本文档后面作了介绍）还依赖于redux等相关技术。但现在apollo已经升级到2.0时代，已经完全抛弃了redux的依赖。

1

npm install apollo-boost react-apollo graphql --save

我们来看一下这三个包的作用：

• apollo-boost：包含设置Apollo Client所需的核心包。如果你需要按自己的意愿定制化项目，可以自行选择安装单独的包：
  — apollo-client：apollo客户端包
  • apollo-cache-inmemory：官方推荐的缓存包
  • apollo-link-http：用于获取远程数据的包
  • apollo-link-error：用于处理错误的包
  • apollo-link-state：本地状态管理的包（2.5版本已集成到apollo-client）
• react-apollo：react的图层集成（用react的组件方式来使用apollo）
• graphql：解析GraphQL查询

实例化Apollo客户端

需要注意一点的是apollo-boost和apollo-client都提供了ApolloClient，但是两者需要的参数有一点差别。具体见各自API：

• apollo-boost导出的Apollo Client对象（详细API）：集成官方核心功能的一个大集合对象
• apollo-client导出的Apollo Client对象（详细API）：默认为App所在的同一主机上的GraphQL端点，
  要自定义uri还需引入apollo-link-http包。如果你使用的是apollo v1.x，可直接从apollo-client包内导出createNetworkInterface方法，用法请见1.x迁移至2.x指南

我们看一下使用apollo-boost实例化Apollo客户端：

1
2
3
4
5
6

import ApolloClient from 'apollo-boost'

const client = new ApolloClient({
    // 如果你实在找不到现成的服务端，可以使用apollo官网提供的：https://48p1r2roz4.sse.codesandbox.io或者本教程的服务：https://kdvmr.sse.codesandbox.io/
    uri: '你的GraphQL服务链接'
})

以及使用apollo-client实例化Apollo客户端：

1
2
3
4
5
6
7
8

import ApolloClient from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'

const client = new ApolloClient({
  link: createHttpLink({ 
    uri: '你的GraphQL服务链接' 
  })
})

编写GraphQL查询语句

如果对GraphQL语法不是很了解，请先移步graphQL基础实践

为了演示GraphQL查询，我们暂且使用普通的请求看一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

import { gql } from 'apollo-boost'

// 实例化 Apollo 客户端

client.query({
  query: gql`
    {
      rates(currency: "CNY") {
        currency
      }
    }
  `
}).then(result => console.log(result));

除了从apollo-boost导入gql，你还可以从graphql-tag这个包导入：

1
2
3

import gql from 'graphql-tag';

gql`...`

显而易见，gql()的作用是把查询字符串解析成查询文档。

连接Apollo客户端到React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// ...
import React from 'react'
import { ApolloProvider } from 'react-apollo'

const App: React = () => {
  // ...
  
  return (
    <ApolloProvider client={client}>
      <div>App content</div>
    </ApolloProvider>
  )
}

export default App

ApolloProvider（详细API）有一个必需参数client。

和redux一样（redux使用<Provider/>组件包裹React App），react-apollo需要<ApolloProvider />组件来包裹整个React App，以便将实例化的client放到上下文中，就可以在组件树的任何位置访问到它。
另外，还可以使用withApollo来包裹组件，以在组件内部获取到client实例（还有很多获取实例的方法，文档后面有介绍），
详情请参考withApollo()。

Query组件与Mutation组件

在graphql中，query操作代表查询，mutation操作代表增、删和改，他们对应REST API的GET与POST请求，但要注意在实际的请求过程中Query或许并不是GET请求，这里只是为了方便大家理解做的假设！

获取数据——Query组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const ExchangeRates = () => (
  <Query
    query={gql`
      {
        rates(currency: "USD") {
          currency
          rate
        }
      }
    `}
  >
    {
      ({ loading, error, data }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;
    
        return data.rates.map(({ currency, rate }) => (
          <div key={currency}>
            <p>{currency}: {rate}</p>
          </div>
        ));
      }
    }
  </Query>
);

恭喜，你刚刚创建了第一个React Query组件！🎉🎉🎉

代码解析：

可以看到，在Query组件内，有一个匿名函数，这个匿名函数有一些参数，最常用的有：loading，error，data。
它们分别代表组件的加载状态、组件的加载错误提示、以及组件加载到的数据。

Query组件是从react-apollo导出的React组件，它使用render prop模式与UI共享GraphQL数据。（即我们可以从组件的props获取到GraphQL查询返回的数据）
Query组件还有很多其他props，上面就展示了一个query属性，其他的如：

• children(根据查询结果显示要渲染的UI)
• variables（用来传递查询参数到gql()）
• skip（跳过这个查询，比如登录时，验证失败，我们使用skip跳过这个查询，则登录失败）

更多props详见Query API

更新数据——Mutation组件

更新数据包括新增、修改和删除，这些操作统一使用Mutation组件。
Mutation组件和Query组件一样，使用render prop模式，但props有差别，Mutation API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import gql from 'graphql-tag';
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {
        (addTodo, { data }) => (
          <div>
            <form
              onSubmit={e => {
                e.preventDefault();
                addTodo({ variables: { type: input.value } });
                input.value = "";
              }}
            >
              <input
                ref={node => {
                  input = node;
                }}
              />
              <button type="submit">Add Todo</button>
            </form>
          </div>
        )
      }
    </Mutation>
  );
};

我们来梳理一下代码：

• 首先，创建用于mutation（突变）的GraphQL，mutation需要一个字符串类型的参数type。它将用于mutation的GraphQL语句包装在gql方法中，并将其传递给Mutation组件的props。
• Mutation组件内需要一个匿名函数作为子函数（也称为render prop函数），同Query组件，但参数有差异。
• render prop函数的第一个参数是Mutation组件内部定义的mutate()函数。为了提高代码可读性，这里取名为addTodo。
  也可以直接用“mutate”表示mutate函数，通过调用它来告诉Apollo Client，接下来要触发mutation（即触发提交表单的POST请求，在onSubmit事件里面可以看见addTodo函数被调用了）。
• render prop函数的第二个参数是一个对象，这个对象有多个属性，包括data（mutation的结果，POST请求的返回值）、loading（加载状态）和error（加载过程中的错误信息），同Query组件。

mutate函数（也就是上面命名的addTodo函数）可选地接受变量，如：

• optimisticResponse
• refetchQueries和update（这些函数就是后面用来更新缓存的）
• ignoreResults：忽略mutation操作返回的结果（即忽略POST请求的返回值）

你也可以将这些值作为props传递给Mutation组件。详细的介绍请移步mutate函数 API

到这里，我们能发出客户端请求，也能得到服务器返回的结果，那接下来就着手怎么处理这些数据，然后渲染到UI上。我们看一下redux在这一步是怎么处理的：

• dispatch触发数据请求
• reducer根据之前定义的action处理得到的新数据，把数据保存到store中
• react-redux的connect连接store与React组件
• mapStateToProps/mapDisToProps完成render prop。

以上步骤，全靠一行一行的代码手动实现，我们再来看一下apollo是怎么处理的：

• cache.writeQuery()

没错，你没看错，就是这一个API，搞定以上redux需要一大堆代码才能完成的数据更新！writeQuery相当于通过一种方式来告诉Apollo Client：
我们已经成功发出POST请求并得到了返回的结果了，现在把结果给你，你更新一下本地的缓存吧！
并且如果你的数据写得很规范（呃，其实它叫范式化，不要急，后面有介绍），甚至连这一句话都不用写，当你执行query或mutation后，UI便会自动根据新的数据更新UI！！

更新缓存——mutation后内部自动query

有时，当执行mutation时，GraphQL服务器和Apollo缓存会变得不同步。当执行的更新取决于本地缓存中已有的数据时，会发生这种情况。例如，本地缓存了一张列表，
当删除列表中的一项或添加一项新的数据，当我们执行mutation后，graphql服务端和本地缓存不一致，我们需要一种方法来告诉Apollo Client去更新项目列表的查询，
以获取我们mutation后新的项目列表数据；又或者我们仅仅使用mutation提交一张表单，本地并没有缓存这张表单的数据，所以我们并不需要新的查询来更新本地缓存。

下面来看一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import gql from 'graphql-tag';
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const GET_TODOS = gql`
  query GetTodos {
    todos
  }
`;

const AddTodo = () => {
  let input;

  return (
    <Mutation
      mutation={ADD_TODO}
      update={(cache, { data: { addTodo } }) => {
        const { todos } = cache.readQuery({ query: GET_TODOS });
        cache.writeQuery({
          query: GET_TODOS,
          data: { todos: todos.concat([addTodo]) },
        });
      }}
    >
      {addTodo => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

通过这段代码可以看见，update()函数可以作为props传递给Mutation组件，但它也可以作为prop传递给mutate函数，即：

1
2
3
4
5
6
7

// 借用上面的mutate（重命名为addTodo）函数来举例
addTodo({
  variables: { type: input.value },
  update: (cache, data: { addTodo }) => {
    // ...
  }
})

update: (cache: DataProxy, mutationResult: FetchResult)：用于在发生突变（mutation）后更新缓存

参数：

• cache，这个参数详细讲又可以讲几节课，所以这里只简单介绍一下，详细API
  • cache通常是InMemoryCache的一个实例，在创建Apollo Client时提供给Apollo Client的构造函数（怎么创建的Apollo Client？请返回创建一个apollo客户端复习一下）
  • InMemoryCache来自于一个单独的包apollo-cache-inmemory。如果你使用apollo-boost，这个包已经被包含在里面了，无需重复安装。
  • cache有几个实用函数，例如cache.readQuery和cache.writeQuery，它们允许您使用GraphQL读取和写入缓存。
  • 另外还有其他的方法，例如cache.readFragment，cache.writeFragment和cache.writeData，详细API)。
• mutationResult，一个对象，对象里面的data属性保存着执行mutation后的结果（POST请求后得到的数据），详细API
  • 如果指定乐观响应，则会更新两次update函数：一次是乐观结果，另一次是实际结果。
  • 您可以使用您的变异结果来使用cache.writeQuery更新缓存。

对于update函数，当你在其内部调用cache.writeQuery时，更新操作会触发Apollo内部的广播查询（broadcastQueries），而广播查询又会触发缓存中与本次mutation相关的数据的自动更新——自动使用受影响组件的GraphQL进行查询并更新UI。
因此当执行mutation后，我们不必手动去执行相关组件的查询，Apollo Client在内部已经做好了所有工作，这区别于redux在dispatch后所做的一切处理数据的工作。

有时，update函数不需要为所有mutation更新缓存（比如提交了一张表单）。所以，Apollo提供单独的cache.writeQuery方法，来触发相关缓存的查询，以更新本地缓存。
所以需要注意：仅仅只在update函数内部调用cache.writeQuery()才会触发广播行为。在其他任何地方，cache.writeQuery只会写入缓存，并且所做的更改不会广播到视图层。
为了避免给代码造成混淆，推荐在未使用update函数时，使用Apollo Client实例对象client的client.writeQuery方法将数据写入缓存。

解析代码：

由于我们需要更新显示TODOS列表的查询，因此首先使用cache.readQuery从缓存中读取数据。
然后，我们将mutation后得到的新todo与现有todo列表合并起来，并使用cache.writeQuery将查询到的数据写回缓存。
既然我们已经指定了一个update函数，那么一旦新的todo从服务器返回，我们的用户界面就会用它进行响应性更新（广播给其他与此缓存数据有关的组件的GraphQL查询，让他们及时更新更新相关缓存到UI上）。

Apollo还提供一种的方法来及时地修改本地缓存以快速渲染UI并触发相关缓存的查询，待查询返回新的数据后再真正更新本地缓存，详见乐观更新。

基于乐观UI，如果您运行相同的查询两次，则不会看到加载指示符（Apollo Client返回的loading字段）。apollo会检测当前的请求参数是否变化，然后判断是否向服务器发送新的请求。

Apollo范式化缓存 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import gql from 'graphql-tag';
import { Mutation, Query } from "react-apollo";

const UPDATE_TODO = gql`
  mutation UpdateTodo($id: String!, $type: String!) {
    updateTodo(id: $id, type: $type) {
      id
      type
    }
  }
`;

// 注意：这里通过graphql得到的todos数据是一个包含id和type字段的对象的数组，与 UPDATE_TODO 里面的字段（主要是id）对应
const GET_TODOS = gql`
  query GetTodos {
    todos
  }
`;

const Todos = () => (
  <Query query={GET_TODOS}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return data.todos.map(({ id, type }) => {
        let input;

        return (
          <Mutation mutation={UPDATE_TODO} key={id}>
            {updateTodo => (
              <div>
                <p>{type}</p>
                <form
                  onSubmit={e => {
                    e.preventDefault();
                    updateTodo({ variables: { id, type: input.value } });

                    input.value = "";
                  }}
                >
                  <input
                    ref={node => {
                      input = node;
                    }}
                  />
                  <button type="submit">Update Todo</button>
                </form>
              </div>
            )}
          </Mutation>
        );
      });
    }}
  </Query>
);

注意：这一次在mutate函数（这里命名为updateTodo）里并没有调用update函数，在也没有传递update函数给Mutation组件，但是UI会立即更新。这就是范式化缓存的魅力了。

范式化缓存——InMemoryCache在将数据保存到存储之前对数据进行范式化，方法是将结果拆分为单个对象，为每个对象创建唯一标识符，并将这些对象存储在展平的数据结构中（创建的唯一标识符为这些对象的键，成为缓存键）。
默认情况下，InMemoryCache将尝试使用常见的id和_id的主键作为唯一标识符（如果它们与对象上的__typename字段一起存在）。

如果未指定id和_id，或者未指定__typename，则InMemoryCache将按照查询到对象的层级关系依次回退到根查询为止。

例如ROOT_QUERY.allPeople.0将作为数据中allPeople[0]对象的缓存键（cache key）被存储到缓存的根查询（ROOT_QUERY）下。（在展平的数据结构中，所有对象都在ROOT_QUERY下）：

即使我们不打算在我们的UI中使用mutation返回的结果，我们仍然需要返回更新的ID和属性，以便我们的UI进行自动更新。

以上代码中，我们不需要指定update函数，因为TODOS查询将使用缓存中更新的TODO数据自动重建查询结果。

结合上一节介绍的update函数那样——并非每次mutation都需要使用update函数——其原因就是依据Apollo Cache的范式化数据结构，
在尽量减少手动操作数据的情况下自动更新UI，当前后端都规范化数据后（特别是唯一标识符id的统一, __typename字段的定义），
在query或mutation操作后，我们几乎不用手动处理数据，就能实现UI的自动更新。

例如：如果只需要更新缓存里面的单条数据，只需要返回这条数据的ID和要更新的属性即可，这种情况下通常不需要使用update函数。

如果想要自定义唯一标识符，即不用默认的ID来生成缓存键，可以使用InMemoryCache构造函数的dataIdFromObject函数：

1
2
3

const cache = new InMemoryCache({
  dataIdFromObject: object => object.key || null
});

在指定自定义dataIdFromObject时，Apollo Client不会将类型名称添加到缓存键，因此，如果您的ID在所有对象中不唯一，则可能需要在dataIdFromObject中包含__typename。

在谷歌浏览器中安装apollo devtools扩展(需要科学上网)，可以清晰看到这种范式化缓存的存储状态。

中场休息

使用redux管理状态，重心是放在如何去拿数据上；而apollo把重心放在需要什么数据上。理解这一点非常重要！

还记得这句话吗？我们在本文档开篇的时候介绍过。现在理解了吗？现在，我们回过头来梳理一下自己学到的知识点：

• 当学习了怎样去获取数据（query）以及更新数据和修改数据（mutation）后，原来Apollo和React结合，原来组件可以这么简单的与数据交互！
• 当学习了Apollo缓存后，我们对Apollo数据存储的理解又上升了一个台阶，把所有查询回来的对象一一拆分，通过唯一标识符的形式把一个深层级的对象展平，直观展现在缓存的根查询中。
• 当学习了Apollo的范式化缓存后，我们才知道，原来自动更新UI可以如此优雅！我们甚至不需要管理数据，只需按照规范传递数据即可！

本地状态管理 详情

上半场我们接触了本地与服务端的远程数据交互，接下来，我们将进入本地的状态管理。

Apollo Client在2.5版本具有内置的本地状态处理功能，允许将本地数据与远程数据一起存储在Apollo缓存中。要访问本地数据，只需使用GraphQL查询即可。

而在2.5版本之前，如果想要使用本地状态管理，必须引入已经废弃的一个包apollo-link-state(API)，
这个包在2.5版本已被废弃，因为从2.5版本开始，这个包的功能已经集成到apollo的核心之中，不再额外维护一个单独的包。而在apollo的1.x版本，如果要实现本地状态管理，依然得引入redux。

Apollo Client有两种主要方法可以执行局部状态突变：

• 第一种方法是通过调用cache.writeData直接写入缓存。
  在更新缓存那一节，我们已经详细介绍过cache.writeData的用法，以及其余update函数的搭配使用。
• 第二种方法是创建一个带有GraphQL突变（mutation）的Mutation组件，该组件调用本地客户端解析器（resolvers）。
  如果mutation依赖于缓存中的现有值，我们建议使用解析器（resolvers，后面两节将介绍，目前只需知道它的存在，它和apollo-server端的resolver完全相同）。

直接写入缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

import Link from './Link';

const FilterLink = ({ filter, children }) => (
  <ApolloConsumer>
    {client => (
      <Link
        onClick={() => client.writeData({ data: { visibilityFilter: filter } })}
      >
        {children}
      </Link>
    )}
  </ApolloConsumer>
);

Apollo在ApolloConsumer组件(API)或Query组件的render prop中注入了Apollo Client实例，
所以当使用这些组件时，我们可以直接从组件的props中拿到client实例。

直接写入缓存不需要GraphQLmutate函数或resolvers函数。因此我们在上面的代码中没有使用它们，我们直接在onClick事件函数里面调用client.writeData来写入缓存。

但是只建议将直接写入缓存用于简单写入，例如写入字符串或一次性写入。
重要的是要注意直接写入并不是作为GraphQL突变实现的，因此不应将它们包含在复杂的开发模式之中。
它也不会验证你写入缓存的数据是否为有效GraphQL数据的结构。
如果以上提到的任何一点对您很重要，则应选择使用本地resolvers。

@client 指令

上一节提到过，Query组件的render prop同样包含client实例。所以配合@client指令，我们可以在Query组件中轻松地从cache或resolvers获取本地状态。
或许换个方式介绍大家能理解得更透彻：配合@client指令，我们可以在Query组件中轻松地从cache获取本地状态，或者通过resolvers从cache获取本地状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

import Link from './Link';

const GET_VISIBILITY_FILTER = gql`
  {
    visibilityFilter @client
  }
`;

const FilterLink = ({ filter, children }) => (
  <Query query={GET_VISIBILITY_FILTER}>
    {({ data, client }) => (
      <Link
        onClick={() => client.writeData({ data: { visibilityFilter: filter } })}
        active={data.visibilityFilter === filter}
      >
        {children}
      </Link>
    )}
  </Query>
);

代码解读：

@client指令告诉Apollo Client在本地获取数据（cache或resolvers），而不是将其发送到graphql服务器。
在调用client.writeData后，render prop函数上的查询结果将自动更新。同时所有缓存的写入和读取都是同步的，所以不必担心加载状态（loading）。

本地解析器——resolvers

终于见到了你——resolvers！前面几节都一笔带过了resolvers（解析器），现在，我们来了解它到底有什么强大的功能。

如果要依赖本地状态实现GraphQL的突变，我们只需要在本地resolvers对象中指定一个与之对应的函数即可。
在Apollo Client的实例化中，resolvers映射为一个对象，这个对象中保存着每一个用于本地突变的resolver函数。
当在GraphQL的字段上找到@client指令时，Apollo Client会在resolvers对象中寻找与之对应的resolver函数，这个对应关系是通过resolvers的键来关联的。

即：当执行没有加@client指令的查询或突变时，GraphQL文档中的字段已预定义在了服务端，所以我们只需在查询或突变时按照服务端定义的字段编写GraphQL文档即可；
当加上@client指令后，Apollo Client不会向服务端发送请求，转而在自己内部寻找GraphQL文档内指定的字段。但是，我们怎么去访问本地的这些字段呢？或许他们根本就不存在。
(关于@client的运作方式，请参考官方文档中关于——本地数据查询流程的部分，由于篇幅原因，本文档不再详细介绍。)
这时，我们就需要自己定义可以访问这些字段的方式——resolver，在解析器对象（resolvers）中定义一个解析函数（resolver），以供GraphQL查询或突变在使用了@client指令时调用，
这样就建立了GraphQL查询或突变与Apollo Client之间的联系，通过这个函数可以解析有@client指令控制的查询或突变，因此这个函数被命名为解析函数，意指从本地解析函数中寻找GraphQL文档中指定的字段的值。

那解析函数定义在哪里呢？

其实它在ApolloClient的构造函数中，也就是说我们实例化Apollo Client时，需要传递resolvers给它。

解析器，它和client-server的resolver函数完全相同：

1 2	> fieldName: (obj, args, context, info) => result; >

obj {object}: 包含父字段上resolver函数返回的结果的对象，或者为DOM树最顶层的查询或突变的ROOT_QUERY对象
args {object}: 包含传递到GraphQL文档中的所有参数的对象。例如，如果使用updateNetworkStatus（isConnected：true）触发查询或突变，则args为{isConnected：true}。
context {object}: React组件与Apollo Client网络堆栈之间共享的上下文信息的对象。除了可能存在的任何自定义context属性外，本地resolvers始终会收到以下内容：

• context.client: Apollo Client的实例
• context.cache: Apollo Cache的实例
  context.cache.readQuery, .writeQuery, .readFragment, .writeFragment, and .writeData: 一系列用于操作cache的API
• context.getCacheKey: 使用__typename和id从cache中获取key。
  info {object}: 有关查询执行状态的信息。实际中，你可能永远也不会使用到这个参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    Mutation: {
      toggleTodo: (_root, variables, { cache, getCacheKey }) => {
        const id = getCacheKey({ __typename: 'TodoItem', id: variables.id })
        const fragment = gql`
          fragment completeTodo on TodoItem {
            completed
          }
        `;
        const todo = cache.readFragment({ fragment, id });
        const data = { ...todo, completed: !todo.completed };
        cache.writeData({ id, data });
        return null;
      },
    },
  },
});

代码解析：

为了切换todo的状态，首先需要查询缓存以找出todo当前状态的内容，然后通过使用cache.readFragment从缓存中读取片段来实现此目的。
此函数采用fragment和id，它对应于item的缓存键（cache key）。我们通过调用context中的getCacheKey并传入项目的__typename和id来获取缓存键。

一旦读取了fragment，就可以切换todo的已完成状态并将更新的数据写回缓存。由于我们不打算在UI中使用mutation的返回结果，因此我们返回null，因为默认情况下所有GraphQL类型都可以为空。

下面，我们来看一下怎么调用这个toggleTodo解析函数（触发toggleTodo突变）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import React from 'react';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';

const TOGGLE_TODO = gql`
  mutation ToggleTodo($id: Int!) {
    toggleTodo(id: $id) @client
  }
`;

const Todo = ({ id, completed, text }) => (
  <Mutation mutation={TOGGLE_TODO} variables={{ id }}>
    // 特别注意，此toggleTodo非解析器里面的toggleTodo，这个toggleTodo是我们之前介绍过的mutate函数，这里被更名为‘toggleTodo’而已，不要混淆了
    {toggleTodo => (
      <li
        onClick={toggleTodo}
        style={{
          textDecoration: completed ? 'line-through' : 'none',
        }}
      >
        {text}
      </li>
    )}
  </Mutation>
);

代码解析：

首先，我们创建一个GraphQL突变文档，它将我们想要切换的item的id作为唯一的参数。我们通过使用@client指令标记GraphQL的toggleTodo字段来指示这是一个本地突变。
这将告诉Apollo Client调用我们本地突变解析器（resolvers）里面的toggleTodo解析函数来解析该字段。然后，我们创建一个Mutation组件，就像我们操作远程突变一样。
最后，将GraphQL突变传递给组件，并在render prop函数的UI中触发它。

查询本地状态

查询本地数据与查询GraphQL服务器非常相似。唯一的区别是本地查询在字段上添加了@client指令，以指示它们应该从Apollo Client cache或resolvers中解析。

我们来看一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

import Todo from './Todo';

const GET_TODOS = gql`
  {
    todos @client {
      id
      completed
      text
    }
    visibilityFilter @client
  }
`;

const TodoList = () => (
  <Query query={GET_TODOS}>
    {
      ({ data: { todos, visibilityFilter } }) => (
        <ul>
          {
            getVisibleTodos(todos, visibilityFilter).map(todo => (
              <Todo key={todo.id} {...todo} />
            ))
          }
        </ul>
      )
    }
  </Query>
);

代码解析：

创建GraphQL查询并将@client指令添加到GraphQL文档的todos和visibilityFilter字段。
然后，我们将查询传递给Query组件。@client指令让Query组件知道应该从Apollo Client缓存中提取todos和visibilityFilter，或者使用预定义的本地resolver解析。

由于上面的查询在安装组件后立即运行，如果cache中没有item或者没有定义任何本地resolver，我们该怎么办？

我们需要在运行查询之前将初始状态写入缓存，以防止错误输出。

初始化本地状态

通常，我们需要将初始状态写入缓存，以便在触发mutation之前查询数据的所有组件都不会出错。
要实现此目的，可以使用cache.writeData为初始值准备缓存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: { /* ... */ },
});

cache.writeData({
  data: {
    todos: [],
    visibilityFilter: 'SHOW_ALL',
    networkStatus: {
      __typename: 'NetworkStatus',
      isConnected: false,
    },
  },
});

注意：Apollo v2.4和v2.5写入初始本地状态的方式不一样，详情参考官方API。

重置本地状态/缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: { /* ... */ },
});

const data = {
  todos: [],
  visibilityFilter: 'SHOW_ALL',
  networkStatus: {
    __typename: 'NetworkStatus',
    isConnected: false,
  },
};

cache.writeData({ data });

client.onResetStore(() => cache.writeData({ data }));

使用client.onResetStore方法可以重置缓存。

同时请求本地状态和远程数据

1
2
3
4
5
6
7

mutation ToggleTodo($id: Int!) {
  toggleTodo(id: $id) @client
  getData(id: $id) {
    id,
    name
  }
}

只需在需要从本地查询的字段后面加上@client指令即可。

使用@client字段作为变量

在同一个graphql语句中，还可以将从本地查到的状态用于下一个查询，通过@export指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import gql from 'graphql-tag';

const query = gql`
  query currentAuthorPostCount($authorId: Int!) {
    currentAuthorId @client @export(as: "authorId")
    postCount(authorId: $authorId)
  }
`;

const cache = new InMemoryCache();
const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
  cache,
  resolvers: {},
});

cache.writeData({
  data: {
    currentAuthorId: 12345,
  },
});

// ... run the query using client.query, the <Query /> component, etc.

在上面的示例中，currentAuthorId首先从缓存加载，然后作为authorId变量（由@export（as：“authorId”）指令指定）传递到后续postCount字段中。
@export指令也可用于选择集中的特定字段，如：

@export指令还可以用于选择集中的特定字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import gql from 'graphql-tag';

const query = gql`
  query currentAuthorPostCount($authorId: Int!) {
    currentAuthor @client {
      name
      authorId @export(as: "authorId")
    }
    postCount(authorId: $authorId)
  }
`;

const cache = new InMemoryCache();
const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
  cache,
  resolvers: {},
});

cache.writeData({
  data: {
    currentAuthor: {
      __typename: 'Author',
      name: 'John Smith',
      authorId: 12345,
    },
  },
});

// ... run the query using client.query, the <Query /> component, etc.

@export指令使用不仅限于远程查询；它还可以用于为其他@client字段或选择集定义变量：(注意以下代码中GraphQL文档的currentAuthorId和postCount字段之后都有@client指令)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';

const query = gql`
  query currentAuthorPostCount($authorId: Int!) {
    currentAuthorId @client @export(as: "authorId")
    postCount(authorId: $authorId) @client
  }
`;

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: {
    Query: {
      postCount(_, { authorId }) {
        return authorId === 12345 ? 100 : 0;
      },
    },
  },
});

cache.writeData({
  data: {
    currentAuthorId: 12345,
  },
});

// ... run the query using client.query, the <Query /> component, etc.

动态注入resolver

有时，当我们在APP中使用了代码拆分，如使用react-loadable时，我们并不是很希望所有的resolver都在初始化Apollo客户端的统一写在一起，而是希望单独拆分到各自的模块中，这样在APP编译后，
每个模块各自resolver将包含在自己的包中，这样也有助于减少入口文件的大小，使用addResolvers 和 setResolvers即可办到（API），
例如以下代码：

1
2
3
4
5
6
7
8

import Loadable from 'react-loadable';

import Loading from './components/Loading';

export const Stats = Loadable({
  loader: () => import('./components/stats/Stats'),
  loading: Loading,
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import React from 'react';
import { ApolloConsumer, Query } from 'react-apollo';
import gql from 'graphql-tag';

const GET_MESSAGE_COUNT = gql`
  {
    messageCount @client {
      total
    }
  }
`;

const resolvers = {
  Query: {
    messageCount: (_, args, { cache }) => {
      // ... calculate and return the number of messages in
      // the cache ...
      return {
        total: 123,
        __typename: 'MessageCount',
      };
    },
  },
};

const MessageCount = () => {
  return (
    <ApolloConsumer>
      {(client) => {
        client.addResolvers(resolvers);
        return (
          <Query query={GET_MESSAGE_COUNT}>
            {({ loading, data: { messageCount } }) => {
              if (loading) return 'Loading ...';
              return (
                <p>
                  Total number of messages: {messageCount.total}
                </p>
              );
            }}
          </Query>
        );
      }}
    </ApolloConsumer>
  );
};

export default MessageCount;

脱离React标签的写法

由于编程习惯的不同，有些人（比如我），并不是很喜欢（或者说成习惯）把逻辑代码和React标签混合写在一起，就如我们从本文档开始一路看来所有的示例代码那样！
个人觉得在一个大型的项目中把Query标签、Mutation标签以及其他的各种标签层层嵌套，再加上各种逻辑实现代码，全部挤在React组件中，真的是一件糟糕的事情。
虽然官方推崇这种写法（以上绝大部分代码是官方文档的示例），他们给出的理由是这样写更方便，更简单！

因人而异吧！

我个人更倾向于把GraphQL和Apollo的逻辑部分与React组件分离开，我们可以使用react-apollo库提供的graphql和compose方法做到分离。
当然，在react-apollo这个包中并不止这两个方法，还有其他的方法，请参考React Apollo API

下面展示一段分离开的代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

import { Avatar, Card, Icon } from 'antd'
import gql from 'graphql-tag'
import * as React from 'react'
import { useEffect, useRef } from 'react'
import { compose, graphql } from 'react-apollo'
import { QueryState, Typename } from 'src/config/clientState'
import { GET_COMPONENTS_LIST, GET_QUERY_STATE } from 'src/graphql'
import { getCorrectQueryState } from 'src/util'
import Pagination from '../pagination'
import './index.scss'

const { Meta } = Card

type Type = {
  id: number,
  name: string
}

type Author = {
  username: string,
  email: string,
  avatar: string
}

type Component = {
  id: number,
  name: string,
  version: string,
  chineseName: string,
  description: string,
  type: Type,
  url: string,
  author: Author,
  previewUrl: string,
  isOwn: boolean,
  isStored: boolean
}

type ListComponent = {
  data: {
    components: Component[],
    compCount: number,
  },
  componentsCollect: ([id, isCollect]: [number, boolean]) => void,
  queryState: QueryState
}

const ListComponent = (props: ListComponent) => {
  const cardList: React.MutableRefObject<HTMLDivElement | null> = useRef(null)
  const { data, componentsCollect, queryState } = props

  // 加载时组件卡片的动画效果，配合React的ref和key属性使用
  useEffect(() => {
    if(cardList.current) {
      cardList.current.childNodes.forEach((element: HTMLElement, index: number) => {
        setInterval(() => {
          element.classList.add('card-load-anim')
        }, index * 40)
      })
    }
  })

  return (
    <div className='m-list'>
      <div className='m-cards' ref={cardList} key={Math.random()}>
        {
          !data || !data.components
            ? null
            : data.components.map((o: Components, i: number) => {
              return (
                <Card
                  key={`m-list-btn-${i}`}
                  hoverable={true}
                  cover={<img alt='example' src='https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png' />}
                  actions={
                    [
                      <a
                        className={`${o.isOwn ? 'm-list-btn-text-disabled' : 'm-list-btn-text'}`}
                        key={`m-list-btn-${i}-1`}
                        href='javascript:void(0)'
                        onClick={!o.isOwn ? componentsCollect.bind(null, [o.id, !o.isStored]) : null}
                      >
                        <Icon type='copy' />
                        {o.isStored ? '取消收藏' : '收藏'}
                      </a>,
                      <a
                        className='m-list-btn-text'
                        key='m-list-btn-2'
                        href='javascript:void(0)'
                      >
                        <Icon type='file-search' />
                        文档
                      </a>
                    ]
                  }
                >
                  <Meta
                    avatar={<Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />}
                    title={o.name}
                    description={o.description}
                  />
                </Card>
              )
            })
        }
      </div>
      <Pagination totalPages={Math.ceil(data.compCount / queryState.pagination.size)} total={data.compCount} />
    </div>
  )
}

export default compose(
  graphql(
    gql(GET_QUERY_STATE),
    {
      props: ({ data: { queryState } }: any) => ({ queryState })
    }
  ),
  graphql(
    gql(GET_COMPONENTS_LIST),
    {
      options: ({ queryState }: any) => ({
        variables: {
          ...getCorrectQueryState(queryState)
        }
      })
    }
  ),
  graphql(gql`
    mutation ($id: Int!, $isCollect: Boolean!){
      storeComponent(id: $id, isStore: $isCollect)
    }
  `, {
    props: ({ mutate }: any) => ({
      componentsCollect: ([id, isCollect]: [number, boolean]) => {
        debugger
        mutate({
          variables: { id, isCollect },
          optimisticResponse: {
            __typename: Typename.Mutation,
            storeComponent: {
              __typename: Typename.Component,
              id,
              isStored: isCollect
            }
          }
        })
      }
    })
  })
)(ListComponent)

写在最后：

如果认真学习完这扁文档，相信你对Apollo技术栈开发React应用已经算是入门了，今后开发时遇到问题，多看一看官方文档，相信你会很快掌握它。

由于水平有限，这篇文章是我自己一边翻译一边加入自己的理解而写成的，其中肯定少不了一些不妥或错误的地方，欢迎大家指正！

相信很多才接触前端的小伙伴甚至工作几年的前端小伙伴对new这个操作符的了解还停留在一知半解的地步，比较模糊。

就比如前不久接触到一个入职两年的前端小伙伴，他告诉我new是用来创建对象的，无可厚非，可能很多人都会这么答！

那这么答到底是错很是对呢？

下面我们全面来讨论一下这个问题：

我们要拿到一个对象，有很多方式，其中最常见的一种便是对象字面量：

1

var obj = {}

但是从语法上来看，这就是一个赋值语句，是把对面字面量赋值给了obj这个变量（这样说或许不是很准确，其实这里是得到了一个对象的实例！！）

很多时候，我们说要创建一个对象，很多小伙伴双手一摸键盘，啪啪几下就敲出了这句代码。

上面说了，这句话其实只是得到了一个对象的实例，那这句代码到底还能不能和创建对象画上等号呢？

我们继续往下看。

要拿到一个对象的实例，还有一种和对象字面量等价的做法就是构造函数：

1

var obj = new Object()

这句代码一敲出来，相信小伙伴们对刚才我说的obj只是一个实例对象没有异议了吧！

那很多小伙伴又会问了：这不就是new了一个新对象出来嘛！

没错，这确实是new了一个新对象出来，因为javascript之中，万物解释对象。

obj是一个对象，而且是通过new运算符得到的，所以说很多小伙伴就肯定的说：new就是用来创建对象的！

这就不难解释很多人把创建对象和实例化对象混为一谈!!

我们在换个思路看看：既然js一切皆为对象，那为什么还需要创建对象呢？本身就是对象，我们何来创建一说？那我们可不可以把这是一种继承呢？

说了这么多，相信不少伙伴已经看晕了，但是我们的目的就是一个：理清new是来做继承的而不是所谓的创建对象！！

那继承得到的实例对象有什么特点呢？

1. 访问构造函数里面的属性
2. 访问原型链上的属性

下面是一段经典的继承，通过这段代码来热热身，好戏马上开始：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

var person = new Person('小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

• 现在我们来解决第一个问题：我们可以通过什么方式实现访问到构造函数里面的属性呢？答案是call或apply

1
2
3
4
5
6
7
8
9
10
11
12
13

function Parent() {
  this.name = ['A', 'B']
}

function Child() {
  Parent.call(this)
}

var child = new Child()
console.log(child.name) // ['A', 'B']

child.name.push('C')
console.log(child.name) // ['A', 'B', 'C']

• 第一个问题解决了，那我们又来解决第二个：那又怎么访问原型链上的属性呢？答案是__proto__

现在我们把上面那段热身代码稍加改造，不使用new来创建实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

// var person = new Person('小明', 25)
var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

function New() {
  var obj = {}
  Constructor = [].shift.call(arguments) // 获取arguments第一个参数：构造函数
  // 注意：此时的arguments参数在shift()方法的截取后只剩下两个元素
  obj.__proto__ = Constructor.prototype // 把构造函数的原型赋值给obj对象
  Constructor.apply(obj, arguments) // 改变够着函数指针，指向obj，这是刚才上面说到的访问构造函数里面的属性和方法的方式
  return obj
}

以上代码中的New函数，就是new操作符的实现

主要步骤：

1. 创建一个空对象

2. 获取arguments第一个参数

3. 将构造函数的原型链赋给obj

4. 使用apply改变构造函数this指向，指向obj对象，其后，obj就可以访问到构造函数中的属性以及原型上的属性和方法了

5. 返回obj对象

可能很多小伙伴看到这里觉得new不就是做了这些事情吗，然而~~

然而我们却忽略了一点，js里面的函数是有返回值的，即使构造函数也不例外。

如果我们在构造函数里面返回一个对象或一个基本值，上面的New函数会怎样？

我们再来看一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
  
  return {
    name: name,
    gender: '男'
  }
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

var person = new Person('小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

执行代码，发现只有name和gender这两个字段如期输出，age、nation为undefined，say()报错。

改一下代码构造函数的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
  
  // return {
  //   name: name,
  //   gender: '男'
  // }
  return 1
}

// ...

执行一下代码，发现所有字段终于如期输出。

这里做个小结：

1. 当构造函数返回引用类型时，构造里面的属性不能使用，只能使用返回的对象；

2. 当构造函数返回基本类型时，和没有返回值的情况相同，构造函数不受影响。

那我们现在来考虑下New函数要怎么改才能实现上面总结的两点功能呢？继续往下看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function Person(name, age) {
  // ...
}

function New() {
  var obj = {}
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  
  // return obj
  return typeof result === 'object' ? result : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
// ...

执行此代码，发现已经实现了上面总结的两点。

解决方案：使用变量接收构造函数的返回值，然后在New函数里面判断一下返回值类型，根据不同类型返回不同的值。

看到这里。又有小伙伴说，这下new已经完全实现了吧？！！

答案肯定是否定的。

下面我们继续看一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
  
  // 返回引用类型
  // return {
  //   name: name,
  //   gender: '男'
  // }
  
  // 返回基本类型
  // return 1
  
  // 例外
  return null
}

再执行代码，发现又出问题了！！！

又出问题了！为什么……？
…
刚才不是总结了返回基本类型时构造函数不受影响吗，而null就是基本类型啊？
…

解惑：null是基本类型没错，但是使用操作符typeof后我们不难发现：

1

typeof null === 'object' // true

特例：typeof null返回为'object'，因为特殊值null被认为是一个空的对象引用。

明白了这一点，那问题就好解决了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function Person(name, age) {
  // ...
}

function New() {
  var obj = {}
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
// ...

解决方案：判断一下构造函数返回值result，如果result是一个引用（引用类型和null），就返回result，但如果此时result为false（null），就使用操作符||之后的obj

好了，到现在应该又有小伙伴发问了，这下New函数是彻彻底底实现了吧！！！

答案是，离完成不远了！！

在功能上，New函数基本完成了，但是在代码严谨度上，我们还需要做一点工作，继续往下看：

这里，我们在文章开篇做的铺垫要派上用场了：

1

var obj = {}

实际上等价于

1

var obj = new Object()

前面说了，以上两段代码其实只是获取了object对象的一个实例。再者，我们本来就是要实现new，但是我们在实现new的过程中却使用了new！

这个问题把我们引入到了到底是先有鸡还是先有蛋的问题上！

这里，我们就要考虑到ECMAScript底层的API了——Object.create(null)

这句代码的意思才是真真切切地创建了一个对象！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function Person(name, age) {
  // ...
}

function New() {
  // var obj = {}
  // var obj = new Object()
  var obj = Object.create(null)
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
// 这样改了之后，以下两句先注释掉，原因后面再讨论
// console.log(person.nation)
// person.say()

好了好了，小伙伴常常舒了一口气，这样总算完成了！！
但是，现实总是残酷的！

小伙伴：啥？还有完没完？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

function New() {
  // var obj = {}
  // var obj = new Object()
  var obj = Object.create(null)
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
// 这里解开刚才的注释
console.log(person.nation)
person.say()

别急，我们执行一下修改后的代码，发现原型链上的属性nation和方法say()报错，这又是为什么呢？

从上图我们可以清除地看到，Object.create(null)创建的对象是没有原型链的，而后两个对象则是拥有__proto__属性，拥有原型链，这也证明了后两个对象是通过继承得来的。

那既然通过Object.create(null)创建的对象没有原型链（原型链断了），那我们在创建对象的时候把原型链加上不就行了，那怎么加呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

function New() {
  Constructor = [].shift.call(arguments)
  
  // var obj = {}
  // var obj = new Object()
  // var obj = Object.create(null)
  var obj = Object.create(Constructor.prototype)
  
  // obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

这样创建的对象就拥有了它初始的原型链了，这个原型链是我们传进来的构造函数赋予它的。

也就是说，我们在创建新对象的时候，就为它指定了原型链了——新创建的对象继承自传进来的构造函数！

看到这里，小伙伴们长长舒了一口气，有本事你再给我安排一个坑出来！

既然都看到这里了，大家要相信我们离最终的曙光已经不远了！

我想说的是，坑是没有了，但是为了程序员吹毛求疵的精神！哦不对，是精益求精的精神，我们还有必要啰嗦一点点！！

想必细心的小伙伴已经注意到了，为什么最后一步中的以下代码：

1
2

Constructor = [].shift.call(arguments)
var obj = Object.create(Constructor.prototype)

不能使用以下代码来代替？

1
2
3

var obj = Object.create(null)
Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype

换个方式说，这两段代码大致的意思基本相同：都是将构造器的原型赋予新创建的对象。但是为何第二段代码要报错（访问不到原型链上的属性）呢？

这个问题很吃基本功，认真去研究研究js的底层APIObject.create以及原型链等知识，就会明白其中的道理。小伙伴可以拉到文章末尾，我把重点都记录下来了，以供大家参考。

现在，我们来梳理下最终的New函数做了什么事，也就是本文讨论的结果——new操作符到底做了什么？

1. 获取实参中的第一个参数（构造函数），就是调用New函数传进来的第一个参数，暂时记为Constructor；
2. 使用Constructor的原型链结合Object.create来创建一个对象，此时新对象的原型链为Constructor函数的原型对象；（结合我们上面讨论的，要访问原型链上面的属性和方法，要使用实例对象的proto属性）
3. 改变Constructor函数的this指向，指向新创建的实例对象，然后call方法再调用Constructor函数，为新对象赋予属性和方法；（结合我们上面讨论的，要访问构造函数的属性和方法，要使用call或apply）
4. 返回新创建的对象，为Constructor函数的一个实例对象。

现在我，我们来回答文章开始时提出的问题，new是用来创建对象的吗？

现在我们可以勇敢的回答，new是用来做继承的，而创建对象的其实是Object.create(null)。
在new操作符的作用下，我们使用新创建的对象去继承了他的构造函数上的属性和方法、以及他的原型链上的属性和方法！

写在最后：

补充一点关于原型链的知识:

1. JavaScript中的函数也是对象，而且对象除了使用字面量定以外，都需要通过函数来创建对象；
2. prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而proto是查找某函数或对象的原型链方式；
3. prototype和proto都指向原型对象；
4. 任意一个函数（包括构造函数）都有一个prototype属性，指向该函数的原型对象；
5. 任意一个实例化的对象，都有一个proto属性，指向该实例化对象的构造函数的原型对象。

补充一下关于Object.create()的知识：

1. Object.create(null)可以创建一个没有原型链、真正意义上的空对象，该对象不拥有js原生对象（Object）的任何特性和功能。
   就如：即使通过人为赋值的方式（newObj.__proto__ = constructor.prototype）给这个对象赋予了原型链，
   也不能实现原型链逐层查找属性的功能，因为这个对象看起来似乎即使有了"__proto__"属性，但是它始终没有直接或间接继承自Object.prototype,
   也就不可能拥有js原生对象（Object）的特性或功能了；
2. 该API配合Object.defineProperty可以创建javascript极其灵活的自定义对象；
3. 该API是实现继承的一种方式；
4. …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var Plane = function() {
    this.blood = 100
    this.attackLevel = 1
    this.defenseLevel = 1
  }
  var plane = new Plane()
  plane.blood = 500
  plane.attackLevel = 10
  plane.defenseLevel = 7
  
  var clonePlane = Object.create(plane)
  console.log(clonePlane) // 输出:Object {blood: 500, attackLevel: 10, defenseLevel: 7}
  // 在不支持 Object.create 方法的浏览器中，则可以使用以下代码:
  Object.create = Object.create || function(obj) {
    var F = function() {}
    F.prototype = obj
    return new F()
  }

当然在 JavaScript 这种类型模糊的语言中，创建对象非常容易，也不存在类型耦合的问题。 从设计模式的角度来讲，原型模式的意义并不算大 。但 JavaScript 本身是一门基于原型的面向对 象语言，它的对象系统就是使用原型模式来搭建的，在这里称之为原型编程范型也许更合适。

最近在前端持续集成上面遇到一个问题，在百度上查了无数资料，无解！！也可能是我搜索姿势不对… -_-
但是当我尝试在google上搜索时，很快得到了答案。
写这段话的目的不是为了黑百度，扬谷歌，望勿借题发挥。至于我的目的，你们自行脑补。😄

前端持续集成，目前流行的平台 circleCI、travis ci等，两者的区别不多介绍，大家可以自行搜索。

CI的配置也不多做介绍，有兴趣的可以去他们的官网。

我用CI做了个发布demo的测试，主要流程是当我提交代码到github仓库时，CI会自动拉取代码或者说clone最新代码到虚拟机上，然后CI会找到仓库里的.yml(CI的配置文件)，并依次执行配置文件里面的预先定义好的代码。

配置文件里面的代码流程是利用webpack编译一个静态的demo出来，编译输出地址为.examples，然后将examples里面的静态文件推送到gh-pages分支。

代码如下：

注意：${...}里面的内容为CI变量，这个可以在CI平台的设置里面预先定义好，这里不过多讨论。
为什么要在用变量，而不直接写在配置文件里？如果是私有仓库，则可以这么做；如果是公开仓库，那你的密码会被所有人看见。

1
2
3
4
5
6

git remote rm origin
git remote add orgin "https://${username}:${password}@github.com/${username}/${repositoryName}.git"

yarn webpack --config build/webpack.config.demo

git subtree push -P examples github gh-pages

执行git remote rm origin的原因是CI在clone项目的时候使用的是如下命令：

1

git clone --depth=50 --branch=master https://github.com/${username}/${repositoryName}.git ${username}/${repositoryName}

可以清楚地看到这只是一个普通的clone仓库代码，里面没有包含用户名和密码，这样就不能直接push代码到github仓库了，所以要做一下修改。

因为这些流程是在CI的虚拟机里面完成的，我们不能也无法在push代码的时候输入用户名和密码，所以要把仓库的用户名（username）和密码（password）写到仓库地址中去。

如下：

1

git remote add orgin "https://${username}:${password}@github.com/${username}/${repositoryName}.git"

这样我们就可以把webpack编译好的demo的静态文件后直接push到gh-pages分支了。

当然还有另外的解决方案，如：

1. 在虚拟机里面设置全局的用户名和密码。
2. 用token来代替password代替，这样自己的密码被保护得更好，只需一个token就行。

1

yarn webpack --config build/webpack.config.demo

这句代码就是用webpack打包静态文件，输出到./examples文件夹下。

1

git subtree push -P examples github gh-pages

这句代码是把examples文件夹下的demo静态文件push到gh-pages分支。

执行到这里，问题来了，CI虚拟机报错：

1
2
3
4
5
6

 ! [rejected]        ******299ab2694e13f437654jb8561c98****** -> gh-pages (fetch first)
error: failed to push some refs to 'https://[secure]@github.com/oceanxy/react-tabllist.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.

依照问题的提示，在push代码之前执行git pull。

但是这样做又会包另外一个错误：

1
2
3
4
5

 ! [rejected]        ******299ab2694e13f437654jb8561c98****** -> gh-pages (non-fast-forward)
error: failed to push some refs to 'https://oceanxy:[secure]@github.com/oceanxy/react-tabllist.git'
hint: Updates were rejected because a pushed branch tip is behind its remote
hint: counterpart. Check out this branch and integrate the remote changes
hint: (e.g. 'git pull ...') before pushing again.

最终换了下思路，强制推送新的静态文件到gh-pages分支

但是我使用的是git subtree，它没有强制推送 –force 这个选项，最终在google里搜索得到如下方法：

1

git push github `git subtree split --prefix examples master`:gh-pages --force

然后提交代码到github，CI自动拉去最新代码及配置文件开始跑虚拟机，等待…success！

最终跑通的流程代码如下：

1
2
3
4
5
6

git remote rm origin
git remote add orgin "https://${username}:${password}@github.com/${username}/${repositoryName}.git"

yarn webpack --config build/webpack.config.demo

git push github `git subtree split --prefix examples master`:gh-pages --force

本笔记根据jest官方文档23.6而来，根据个人理解，整合官网零散的文档并提炼了jest入门常用的内容到本笔记，以备后续使用和查阅！因个人能力有限，如有缺陷，请海涵！也欢迎您提出宝贵的意见。
本文使用yarn来管理npm包，如需npm或其他方式，请自行查阅相关文档。

开始使用之前的准备和配置

安装

npm

1

npm install --save-dev jest

yarn

1

yarn add --dev jest

全局安装来使用 CLI
yarn global add jest
使用 CLI 对 my-test 文件进行测试
jest my-test –notify –config=config.json
–config 使用config.json 作为一个配置文件。
–notify 在运行完成后显示一个原生的操作系统通知。
更多CLI信息请参阅

初始化

1

jest --init

在根目录生成一个基本的配置文件 jest.config.js

配合babel和react，如未使用则跳过此处

babel 7.0 以前版本

1

yarn add --dev babel-jest babel-core regenerator-runtime

然后在 .babelrc 文件做如下配置：

1
2
3

{
  "presets": ["env", "react"]
}

babel 7.0及以后版本

1

yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

然后在 .babelrc 文件做如下配置：

1
2
3
4
5
6

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
}

注意：

如果您使用选项 {“modules”：false} 关闭了ES6模块的转换，则必须确保在测试环境中启用此功能。

1
2
3
4
5
6
7
8
9

// .babelrc
{
  "presets": [["env", {"modules": false}], "react"],
  "env": {
    "test": {
      "presets": [["env"], "react"]
    }
  }
}

当你安装 Jest 时，babel-jest 是会被自动安装的，并且如果你的项目下存在一个 Babel 配置文件时，它将会自动对相关文件进行转义。 如果要避免这个行为，你可以显式的重置 transform 配置项：

1
2
3
4
5
6

// package.json
{
  "jest": {
    "transform": {}
  }
}

匹配器（matchers）

普通匹配器

1
2
3
4

// 精准（exact）匹配 调用的Object.is 
test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

1
2
3
4
5
6

// 匹配对象的值是否相等，请使用 toEqual() 代替 toBe()
test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

expect(2 + 2) 返回一个“期望对象（expect Object）”
toBe(4) 和 toEqual() 是匹配器，toEqual()会递归检查对象或数组的每个字段

1
2
3
4
5
6
7
8

// 取反的匹配 not.toBe()
test('adding positive numbers is not zero', () => {
  for (let a = 1; a < 10; a++) {
    for (let b = 1; b < 10; b++) {
      expect(a + b).not.toBe(0);
    }
  }
});

Truthiness

toBeNull 只匹配 null
toBeUndefined 只匹配 undefined
toBeDefined 与 toBeUndefined 相反
toBeTruthy 匹配任何 if 语句为真
toBeFalsy 匹配任何 if 语句为假

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test('zero', () => {
  const z = 0;
  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

数字

1
2
3
4
5
6
7
8
9
10
11

test('two plus two', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

1
2
3
4
5
6

// 对于比较浮点数相等，使用 toBeCloseTo 而不是 toEqual，因为你不希望测试取决于一个小小的舍入误差。
test('两个浮点数字相加', () => {
  const value = 0.1 + 0.2;
  //expect(value).toBe(0.3);           这句会报错，因为浮点数有舍入误差
  expect(value).toBeCloseTo(0.3); // 这句可以运行
});

字符串

1
2
3
4
5
6
7
8

// toMatch(正则表达式)
test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});

数组

1
2
3
4
5
6
7
8
9
10
11

const shoppingList = [
  'diapers',
  'kleenex',
  'trash bags',
  'paper towels',
  'beer',
];

test('购物清单（shopping list）里面有啤酒（beer）', () => {
  expect(shoppingList).toContain('beer');
});

例外

如果你想要测试的特定函数抛出一个错误，在它调用时，使用 toThrow。

1
2
3
4
5
6
7
8
9
10
11
12

function compileAndroidCode() {
  throw new ConfigError('you are using the wrong JDK');
}

test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(ConfigError);

  // You can also use the exact error message or a regexp
  expect(compileAndroidCode).toThrow('you are using the wrong JDK');
  expect(compileAndroidCode).toThrow(/JDK/);
});

匹配器的完整列表，请查阅参考文档。

测试异步代码

在JavaScript中执行异步代码是很常见的。 当你有以异步方式运行的代码时，Jest 需要知道当前它测试的代码是否已完成，然后它可以转移到另一个测试。 Jest有若干方法处理这种情况。

回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 错误写法
test('the data is peanut butter', () => {
  function callback(data) {
    expect(data).toBe('peanut butter');
  }

  fetchData(callback);
});

// 正确写法
test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

如果 done()永远不会调用，这个测试将失败，这也是你所希望发生的。

Promises

从您的测试返回一个 Promise, Jest 会等待这一 Promise 来解决。 如果 Promise 被拒绝，则测试将自动失败。

1
2
3
4
5
6
7
8

test('the data is peanut butter', () => {
  expect.assertions(1);
  
  // fetchData，返回值是应该解析为字符串 'peanut butter' 的 Promise 
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

一定要返回 Promise - 如果你省略 return 语句，您的测试将在 fetchData 完成之前完成。

如果你想要 Promise 被拒绝，使用 .catch 方法。 请确保添加 expect.assertions 来验证一定数量的断言被调用。 否则一个fulfilled态的 Promise 不会让测试失败︰

1
2
3
4

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return fetchData().catch(e => expect(e).toMatch('error'));
});

.resolves / .rejects

1
2
3
4
5
6
7
8
9

test('the data is peanut butter', () => {
  expect.assertions(1);
  return expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return expect(fetchData()).rejects.toMatch('error');
});

Async/Await

1
2
3
4
5
6
7
8
9
10
11
12
13
14

test('the data is peanut butter', async () => {
  expect.assertions(1);
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

您可以将async和await与.resolves或.rejects结合起来

1
2
3
4
5
6
7
8
9

test('the data is peanut butter', async () => {
  expect.assertions(1);
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  await expect(fetchData()).rejects.toMatch('error');
});

Setup and Teardown

写测试的时候你经常需要在运行测试前做一些准备工作，和在运行测试后进行一些整理工作。 Jest 提供辅助函数来处理这个问题。

为多次测试重复设置

如果你有一些要为多次测试重复设置的工作，你可以使用 beforeEach 和 afterEach。

例如，我们考虑一些与城市信息数据库进行交互的测试。 你必须在每个测试之前调用方法 initializeCityDatabase() ，同时必须在每个测试后，调用方法 clearCityDatabase()。 你可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

beforeEach(() => {
  initializeCityDatabase();
});

afterEach(() => {
  clearCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

beforeEach 和 afterEach 能够通过与 异步代码测试 相同的方式处理异步代码——他们可以采取 done 参数或返回一个 promise。 例如，如果 initializeCityDatabase() 返回解决数据库初始化时的 promise ，我们会想返回这一 promise︰

1
2
3

beforeEach(() => {
  return initializeCityDatabase();
});

一次性设置

在某些情况下，你只需要在文件的开头做一次设置。 当这种设置是异步行为时，可能非常恼人，你不太可能一行就解决它。 Jest 提供 beforeAll 和 afterAll 处理这种情况。

例如，如果 initializeCityDatabase 和 clearCityDatabase 都返回了 promise ，城市数据库可以在测试中重用，我们就能把我们的测试代码改成这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

beforeAll(() => {
  return initializeCityDatabase();
});

afterAll(() => {
  return clearCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

其他内容请参考官网文档

ant design的Upload 组件(下称‘Upload 组件’)封装到FormData对象后，文件对象被转换成 '[object Object]' 的字符串形式，文件流失效。

2、原因分析

先从Upload 组件说起

Upload 组件在文件上传前后都有诸多的回调函数，其中最常用的就是onChange回调函数，它在上传文件状态发生改变时被调用，这个回调函数有一个参数info，值为上传的文件对象，也正是我们需要传到后台的文件对象，如下截图：

可以清楚看到info这个参数是一个对象，里面也包含两个对象，分别为file和fileList，file是当前最近上传的一个文件对象，fileList是一个数组，包含当前批量或多次上传的多个文件对象。

我们发现Upload 组件把文件上传后的各种信息再次封装了一层。（不要以为这句话是废话，这里为后面埋伏笔，或者说成设铺垫。😁）

当把fileList这个数组通过以下代码——

1
2

const formData = new FormData()
formData.append('key', fileList)

——添加到formData对象里面后，发现formData对象里面的fileList字段被转换成了'[Object Object]'，无法通过文件流的形式传到后台，这里暂且将这个对象称为一般对象。

为什么会出现这个问题呢？下面来仔细看看FormData对象

FormData对象其实是在XMLHttpRequest2级定义的，它是为序列化表以及创建与表单格式相同的数据提供便利，用于XHR传输。

再来看一看formData.append(key, values[, filename])方法。

append()方法会添加一个新值到FormData对象内的一个已存在的键中，如果键不存在，则会添加该键；如果指定的键已经存在，会把新值添加到已有值集合的后面。

append()方法的参数：

• name - value 中包含的数据对应的表单名称。

• value - 表单的值。可以是 USVString 或 Blob (包括子类型，如 File)。

• filename【可选】 - 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。

3、解决方案

通过上面value参数的注释，我们能看到它的取值类型为USVString或者Blob

而我们刚才取值的file或者fileList都是javascript的‘一般对象’，并非Blob对象，那我们要传给后台的Blob对象到底在哪？

通过查阅文档，发现<input type='file'>的值（File对象）本身就是一个Blob对象，或者说成File对象继承了Blob对象。

说到这里，那我们到底该到哪里去获取File对象呢？想必细心的你已经发现了，神秘的它就在Upload 组件的onChange回调函数的返回的参数中，即：

1
2
3

onchange(info) {
  info.file.originFileObj
}

如果还不明白，请看下面的截图：

另外，Upload 组件的官方文档中还有其他的回调函数可以拿到原生的（未经过Upload 组件处理的）File对象，比如beforeUpload，详情见官方文档

总结，我们只需要简单的处理一下Upload 组件的onChange回调函数的返回参数，即可拿到可以封装到FormData中的File对象。

4、最后来一个温馨提醒

1. 可以使用 FormData 来上传文件，但是必须得在<form>标签上添加属性: enctype=”multipart/form-data”

2. 如果使用 XHR 上传表单，记得设置 contentType=false，然后使用第1步的<form>表单。

   更多具体详情请参考FormData文档

在 render() 里面某个DOM 结点上定义了 ref=’xxx’ 后，在生命周期里面使用 this.refs.xxx 获取 xxx 结点，控制台报错 xxx 结点 undefined。

2、原因分析

根据 react 的机制（见上图），render() 方法执行后会进入生命周期 componentDidMount 中，正常情况下在 componentDidMount 中可以使用 this.refs.xxx 获取在 render() 中定义的 ref 属性，但是这里出现了 undefined ，即 this.refs.xxx 的值为 undefined。

为什么会出现这样的情况呢？
在 render() 内，rerutn（DOM结构）之前有一句 return false，导致在 DOM 中定义的 ref=’xxx’ 没被渲染，故而 react 取不到 xxx 的值（主要是在检测数据的合法性方面会导致这个问题）

3、解决方案

1、 在 componentDidMount 中取值时检测一下 xxx 结点是否已被定义：

1
2
3
4

const { keyPersonnelChart } = this.refs
if ( xxx !== undefined) {
// do something
}

2、不要在 render() 中 return(DOM结构) 之前使用 return false 语句，延伸出 不要在父级检测数据的合法性，直接将这一步放到子组件中进行。例如：

1
2
3
4
5
6
7
8
9

render() {
    if ( !this.props.data ) {
        return false
    }
    
    return (
    <div ref='xxx'></div>
    )
}

sass 采用编程式的写法来编写样式表，最后编译成我们常见的css样式表。

二、 安装

• SASS 由 Ruby 语言编写，但是不懂Ruby，不妨碍我们学习使用 SASS，因为两者之间没有关联性。
  唯一的条件是必须在 Ruby 环境下运行 SASS。

• SASS 是普通的文本文件，兼容 css 语法。

• SASS 文件的后缀名为 .sass 或者 .scss。严重推荐使用 .scss 写法

.sass 语法

1
2
3
4
5
6
7

body
  background: #eee
  font-size: 12px
p
  background: #0982c1
  span
    color: red

.scss 语法

1
2
3
4
5
6
7
8
9
10
11

body {
  background: #eee;
  font-size:12px;
}
p {
  background: #0982c1;
  
  span {
    color: red;
  }
}