>我有以下简单的组件：
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.memo仍会导致相同的问题。我尝试记住我的ActivityFeedTitle组件，如下所示：
const Memo = React.memo(() => (
<ActivityFeedTitle />
))
然后在我的回报中像这样使用它：
return (
<Fragment>
{<Memo />}
<ActivityFeed data={data} isLoading={loading} />
</Fragment>
)
出现同样的问题。我还尝试将以下内容作为React.memo的第二个参数传递() => false但这也不起作用。
改用React.memo()来记忆基于道具的组件。
React.memo(function ActivityFeedTitle(props) {
return <span>{props.title}</span>
})
注意：
此方法仅作为性能优化存在。不要依赖它来"阻止"渲染，因为这可能会导致错误。
传递给React.memo的第二个参数需要返回true以防止重新渲染。它不是计算组件是否应该更新，而是确定传递的 props 是否相等。
您对useMemo的用法不正确。
来自反应钩子文档：
传递一个"create"函数和一个依赖项数组。 仅当其中一个依赖项具有 改变。此优化有助于避免昂贵的计算 每个渲染。
如果未提供数组，则将在每次渲染时计算一个新值。
您需要使用此处useEffect这样的useMemo来计算值，而不是渲染组件。
React.memo
React.memo()就是您要找的那个。除非道具发生变化，否则它可以防止重新渲染。
您可以使用 React.memo 并在定义组件的地方使用它，而不是在创建组件实例的地方，您可以在 ActivityFeedTitle 组件中执行此操作，
如下所示const ActivityFeedTitle = React.memo(() => {
return (
//your return
)
})
希望对你有帮助
这是因为渲染父级会导致它的子级在大多数情况下重新渲染。 这里更好的优化是将数据获取逻辑放在 ActivityFeed 组件中或放入包装 ActivityFeed 的 HOC 中。