如果我不需要任何props,我应该用 React.memo() 包装我的所有组件吗?

IT技术 javascript reactjs react-redux react-hooks
2021-05-19 10:27:54

虽然很明显为什么React默认情况下不对它的所有功能组件执行 React.memo,但我们应该在需要时自己包装我们的功能组件。

就我而言,我有一个大型react项目,其结构如下:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

我所有的业务逻辑都在 redux 中,组件在useSelector内部使用以从存储中获取数据。

用 包装我的所有子组件是否有意义React.memo,因为根级别的任何选择器的更改都会导致我的整个应用程序重新呈现?

早些时候,connect我们自动获得了一个记忆化组件,它比较了自定义props和作为props传递给组件的存储值,那么我们现在应该在没有接收任何props的组件中使用时手动总是这样做吗?React.memouseSelector

1个回答

我认为你应该考虑使用React.memo那些不接受任何props的子组件。我强烈推荐这篇文章:https : //dmitripavlutin.com/use-react-memo-wisely/

2.1 组件经常使用相同的 props 渲染
在 React.memo() 中包装组件的最佳情况是当您期望功能组件经常使用相同的 props 渲染时。

由于您询问的组件不接受任何props,这意味着props永远不会改变。因此,按理说,使用React.memo 避免渲染周期。请注意同一篇文章中的这一重要警告:

5. React.memo() 是性能提示
严格来说,React 使用记忆作为性能提示。

虽然在大多数情况下 React 避免渲染记忆化组件,但您不应该指望它来阻止渲染。