React 和 GraphQL 中使用的“...”语法是啥？它是更通用的Javascript吗？

Posted 2023-03-08

【中文标题】React 和 GraphQL 中使用的“...”语法是啥？它是更通用的Javascript吗？

【英文标题】：What is the "..." syntax used in both React and GrahpQL? Is it more general Javascript?React 和 GraphQL 中使用的“...”语法是什么？它是更通用的Javascript吗？

【发布时间】：2017-05-22 14:11:22

【问题描述】：

试图理解 React 和 GraphQL 中的“...”符号之间的联系。他们是

1) 使用相同的通用 javascript 语法？如果是这样，这意味着什么——因为我的理解是针对 React 的。 （我认为这意味着将从父母继承的属性传递给孩子。”

2) 不相关的语法在 React 和 GraphQL 中恰好相同。

我在example from the ApolloClient tutorial 中看到它在 GraphQL 中使用

tutorial: const PokemonQuery = gql`   query PokemonQuery($id: ID!) 
    Pokemon(id: $id) 
      ... PokemonCardPokemon
          $PokemonCard.fragments.pokemon

在这个例子中，PokemonCardPokemon 是一个 GraphQL 片段。该教程说：“请注意，我们使用 ... 语法在查询中选择片段，并且我们还在查询之后使用 $PokemonCard.fragments.pokemon 包含片段。”

【问题讨论】：

它在哪里做什么？你问的是 ES6 语法吗？

What does the three dots in react do?的可能重复

Slaks 和 Shahank Kadne：澄清问题是 React 中如此常用的“...”是否与 GraphQL 片段中使用的“...”有关。它们是相同的还是它们都使用更通用的 javascript 表示法是巧合？

【参考方案1】：

#2

JavaScript/React 和 GraphQL 各自为自己的目的使用 ... 运算符，但不知道对方如何使用它。

---

在 JavaScript 中，... 与数组和类似数组的对象一起用于collect 或spread 它们的值。

例如，传播数组的值，以便将它们作为单独的参数传递。

var list = [ 5, 3, 10 ];
console.log(Math.min(...list));           // 3

// shorter and simpler than...
console.log(Math.min.apply(Math, list));  // 3

// and means the same as...
console.log(Math.min(5, 3, 10));          // 3

---

在 GraphQL 中，... 用于应用 Fragments 或可在整个查询中重复使用的命名字段集。

  leftComparison: hero(episode: EMPIRE) 
    ...comparisonFields
  
  rightComparison: hero(episode: JEDI) 
    ...comparisonFields
  


fragment comparisonFields on Character 
  name
  appearsIn
  friends 
    name
  

如果 字段被重复。片段的概念经常用于 将复杂的应用程序数据需求拆分成更小的块， 尤其是当您需要将大量 UI 组件与 将不同的片段合并到一个初始数据提取中。