时间戳

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

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

问题描述

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

就我而言，我有一个大型反应项目，其结构如下：

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我们自动获取了一个 memoized 组件，该组件正在比较自定义 props 和作为 props 传递给组件的存储值，所以我们现在是否应该在未接收任何 props 的组件中使用时总是手动执行？React.memouseSelector

标签： javascriptreactjsreact-reduxreact-hooks

解决方案

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

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

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

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

虽然在大多数情况下 React 会避免渲染一个记忆化的组件，但你不应该指望它来阻止渲染。

推荐阅读