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

Posted 2023-03-10

【中文标题】如何防止使用 useSubscription() 重新渲染？

【英文标题】：How to prevent re-rendering with 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，能告诉我如何防止重新渲染吗？

为什么要防止重新渲染？

在订阅中，更新了一个全局变量。它用于计算，但不会触发重新渲染。最终应该更新全局变量，而无需通过订阅重新渲染。

【参考方案1】：

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