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） 返回（prevProps.location.pathname！=='/'&& nextProps.location.pathname！=='/'） } 使用Router导出默认值（React.memo（MyComponent，compare））;

Answer 2

感谢您的提问，两个月前对我很有帮助。

memo 函数接受一个组件和一个 function，它将被调用来决定 React 是否需要重新渲染，如果函数返回 true，组件将不会重新-渲染，无论如何，如果函数返回 false，那么 props 现在不同，React 对您的组件执行 re-render。

现在：为了在传递给 pathname 的 function 中正确访问 memo，memo 应该用 withRouter 包裹，而不是相反，{{ 1}} 包装一个组件（它不知道它是不是一个组件的记忆版本，它只是包装它）并将它的路由道具传递给它。

作为第二个参数传递给 withRouter 的 function 现在可以访问 memo 和 previous props 并进行我们之前讨论的比较（每个 props 作为内部它是您想要的完整路由详细信息）。

new

最后，要特别注意如何在 import { memo } from 'react'; function propsAreEqualBasedOnPathname(prevProps, nextProps) { return prevProps.location.pathname == nextProps.location.pathname; } withRouter(memo(MyComponent), propsAreEqualBasedOnPathname); 内部进行比较，因为某些错误可能会阻止您的组件在将来永远重新渲染。

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