如果我不需要任何道具，我应该用 React.memo() 包装我的所有组件吗？

Question

虽然很明显为什么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我们自动获得了一个记忆化组件，它比较了自定义道具和作为道具传递给组件的存储值，那么我们现在是否应该在未接收任何道具的组件中使用时始终手动执行？React.memouseSelector

Answer 1

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

\n

\n

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

\n

\n

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

\n

\n

5. React.memo() 是一个性能提示
\n严格来说，React 使用 memoization 作为性能提示。

\n

虽然在大多数情况下，React 会避免渲染记忆组件，但您不应该依靠它来阻止渲染。

\n

\n