为什么函数式组件会渲染两次？答案

【问题标题】：Why does functional component render twice?为什么函数式组件会渲染两次？
【发布时间】：2020-05-06 01:28:01
【问题描述】：

我有一个使用 Apollo 从 GraphQL 路由中获取数据的组件。

当我加载页面时，它会在控制台记录两次数据。

这是组件：

const LAUNCHES_QUERY = gql`
  query LaunchesQuery {
    launches {
      flight_number
      mission_name
      launch_date_local
      launch_success
    }
  }
`

const Launches = () => {

    const { loading, error, data } = useQuery(LAUNCHES_QUERY)

    const getLaunches = () => {

        if (loading) return <div>Loading..</div>
        if (error) console.log(error)
        console.log(data)
    }

  return (
    <div>
      <h1 className='display-4 my-3'>Launches</h1>
      {getLaunches()}
    </div>
  )
}

我做错了什么？

【问题讨论】：

有初始渲染，数据回来后渲染。

标签： reactjs graphql react-apollo

【解决方案1】：

useQuery 是异步操作，第一次渲染将在获取数据时进行，下一次渲染将在获取数据时进行。因此，它记录了两次。

【讨论】：

但在两个日志中，数据都已完全解析。在第一次渲染中日志不应该是空的/未定义的，而它仍在获取？
如果你看加载状态，它会是真的，然后它会是假的。请检查一下。
现在我明白了。所以我不应该担心这种做法的性能问题？
是的，这里的性能不用担心，这是正常现象。
谢谢你。赞赏

【解决方案2】：

一个来自useQuery 的开头，另一个来自useQuery 完成获取。

你可以console.logloading查看。

【讨论】：