3

我不想在某些路径上重新渲染我的组件，尝试使用 React.memo 执行此操作并使用 withRouter HOC 检查当前路径。

React.memo 中的比较函数不会被调用。

function compare(prevProps, nextProps) {
  console.log(prevProps,nextProps)
  return (prevProps.location.pathname !== '/' && nextProps.location.pathname !== '/')
}
export default React.memo( withRouter(MyComponent), compare);
4

2 回答 2

2

像这样使用它

function compare(prevProps, nextProps) {
  console.log(prevProps,nextProps)
  return (prevProps.location.pathname == nextProps.location.pathname)
}
export default withRouter(React.memo(MyComponent, compare));

注意你即将进行的比较

您进行的比较有一个流程，如果您在路由所在的主页中，/那么比较函数将始终返回false导致重新渲染（就像memo一开始不存在一样），如果您的在子路由中不是/like/articles那么比较总是会返回true，导致组件一直重新渲染，就像memo一开始不存在一样。

你想要的是一个比较，它取决于new和old道具有equal导致保存重新渲染的东西或有不相等的东西导致新的重新渲染为你渲染新数据。

所以比较应该是这样的

prevProps.location.pathname == nextProps.location.pathname
于 2020-10-19T16:44:57.177 回答
0

谢谢你的问题，两个月前对我很有帮助。

memofunction 接受一个组件和一个function将被调用的组件来决定 React 是否需要重新渲染，如果函数返回true组件将不会重新渲染，如果函数返回false，那么 props 现在不同，Reactre-render会这样做你的组件。

现在：要pathname正确访问function传递给的memothenmemo应该用withRouter而不是相反的方式包装，withRouter包装一个组件（它不知道它是否是组件的记忆版本，它只是包装它）并将其传递给路由道具。

作为第二个参数传递的 to 现在可以访问andfunction道具并像我们之前讨论的那样进行比较（其中每个道具作为您想要的完整路由细节）。memopreviousnew

import { memo } from 'react';

function propsAreEqualBasedOnPathname(prevProps, nextProps) {
    return prevProps.location.pathname == nextProps.location.pathname;
}

withRouter(memo(MyComponent), propsAreEqualBasedOnPathname);

最后，要特别注意如何在内部进行比较，compare function因为一些错误可能会阻止您的组件在未来永远重新渲染。

我发现使用memowithwithRouter对改进performanceReact 组件非常重要，特别是如果组件是一个充满细节和获取逻辑的页面，这可能会花费您一些时间来渲染，因此您节省的每次重新渲染都会提高页面性能。

于 2021-07-14T12:39:58.960 回答