javascript - 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 Hook 来实现这一点。我通过 return 更改为:

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

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

我错过了什么？

编辑:

使用 React.memo 仍然会导致同样的问题。我尝试按如下方式内存我的 ActivityFeedTitle 组件:

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

然后在我的返回中像这样使用它:

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

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

Answer 1

使用React.memo()而不是根据 Prop 内存组件。

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

注意:

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.