React.memo 和 withRouter

Question

我不想在某些路径上重新渲染我的组件，尝试使用 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);

Answer 1

像这样使用它

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

Answer 2

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

memo功能需要的组件和function ，将被调用来决定是否做出反应需要重新渲染与否，如果函数返回true的组件将不会重新渲染，任何方式，如果在函数返回false ，则道具现在不同和 React 会re-render你的组件。

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

该function通过对memo的第二个参数现在可以访问previous和new道具，并做比较，因为我们谈到早期（其中每个道具为它里面的完全路由的详细介绍，你想要的）。

import { memo } from 'react';

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

withRouter(memo(MyComponent), propsAreEqualBasedOnPathname);

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

我发现使用带有withRouter memo对于提高 React 组件的performance非常重要，特别是如果组件是一个充满细节和获取逻辑的页面，这可能会花费您一些时间来渲染，因此您保存的每次重新渲染都会提高您的页面性能.