如何防止使用 useSubscription() 重新渲染？答案

【问题标题】：How to prevent re-rendering with useSubscription()?如何防止使用 useSubscription() 重新渲染？
【发布时间】：2020-09-04 16:25:56
【问题描述】：

你们中的许多人可能听说过 GraphQL。它提供QUERY 和MUTATION。它还支持SUBSCRIPTION 作为web socket 的100% 替换。我是 GraphQL 和 hooks 的忠实粉丝。今天我遇到了useSubscription 的问题，它是SUBSCRIPTION 的钩子版本。当这个订阅被触发时，一个 React 组件被重新渲染。我不确定为什么会导致重新渲染。

import React from 'react'
import { useSubscription } from 'react-apollo'

const Dashboard = () => {
  ...
  useSubscription(query, {
    onSubscriptionData: data => {
      ...
    }
  })

  render (
    <>
      Dashboard
    </>
  )
}

实际上useSubscription 的 API 文档现在并没有说明重新渲染的任何内容。如果您能提供一个很好的解决方案来防止重新渲染，我们将不胜感激。

谢谢！

【问题讨论】：

当您从 onSubscriptionData 收到新数据时，您的组件将被重新渲染。就像父级传递一个 prop 给它的子级，当你更新这个 prop 时，子组件会被重新渲染。
嗨@Michael，能告诉我如何防止重新渲染吗？
为什么要防止重新渲染？
在订阅中，更新了一个全局变量。它用于计算，但不会触发重新渲染。最终应该更新全局变量，而无需通过订阅重新渲染。

标签： react-hooks apollo react-apollo graphql-subscriptions

【解决方案1】：

根据我的经验，在 onSubscriptionData 中接收新数据时无法防止重新渲染。如果你的全局数据用于计算，你应该使用 useMemo 作为你的全局变量。另一方面，您应该考虑是否需要将变量放入 onSubscriptionData 中？还有其他方法吗？您是否在正确的组件中使用了 useSubscription ？如果你必须这样做，你必须接受额外的渲染。
希望我的回答对您的情况有所帮助。

【讨论】：