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没有'首先不存在），并且如果您在/ 以外的子路由中，例如/articles，那么比较将始终返回true，从而导致组件一直重新渲染，就像如果memo 本来就不存在。

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

所以比较应该是这样的

prevProps.location.pathname == nextProps.location.pathname

Answer 2

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

memo 函数接受一个组件和一个 function 来决定 React 是否需要重新渲染，如果函数返回 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 中进行比较的方式，因为某些错误可能会阻止您的组件在未来永远重新渲染。

我发现使用 memo 和 withRouter 对改进 React 组件的 performance 非常重要，特别是如果组件是一个充满细节和获取逻辑的页面，可能会花费你一些时间来渲染，所以每次重新- 渲染您保存，提高您的页面性能。