React.useMemo 无法防止重新渲染

Question

我有以下简单的组件：

const Dashboard = () => {
  const [{ data, loading, hasError, errors }] = useApiCall(true)

  if (hasError) {
    return null
  }

  return (
    <Fragment>
      <ActivityFeedTitle>
      <ActivityFeed data={data} isLoading={loading} />
    </Fragment>
  )
}

export default Dashboard

我想阻止ActivityFeedTitle组件的所有重新渲染，以便它在加载时仅渲染一次。我的理解是，我应该能够使用React.useMemo带有空依赖项数组的钩子来实现此目的。我改为return：

return (
    <Fragment>
        {React.useMemo(() => <ActivityFeedTitle>, [])}
        <ActivityFeed data={data} isLoading={loading} />
    </Fragment>
)

就我而言，这应该阻止该组件的所有重新渲染？但是，该ActivityFeedTitle组件仍然会在组件的每次渲染上重新渲染Dashboard。

我缺少什么？

编辑：

使用React.memostill 会导致同样的问题。我尝试ActivityFeedTitle按如下方式记忆我的组件：

const Memo = React.memo(() => (
  <ActivityFeedTitle />
))

然后在我的回报中这样使用它：

return (
    <Fragment>
        {<Memo />}
        <ActivityFeed data={data} isLoading={loading} />
    </Fragment>
)

出现同样的问题。() => false我还尝试将以下内容作为 的第二个参数传递React.memo，但这也不起作用。

Answer 1

而是使用React.memo()基于 props 的记忆组件。

\n\n

React.memo(function ActivityFeedTitle(props) {\n  return <span>{props.title}</span>\n})\n

\n\n

做记录：

\n\n

\n

该方法仅作为性能优化而存在。不要依赖它来 \xe2\x80\x9cprevent\xe2\x80\x9d 渲染，因为这可能会导致错误。

\n

\n