Reactjs Material UI 如何在按下回车键时防止选项卡重新渲染

Question

我已经基于material-ui构建了一个UI，其中包含reactJS中的选项卡。每当选择一个选项卡时，该选项卡下的内容将重新加载，这会导致性能问题，因为我在其中一个选项卡下显示了一个iFrame。我尝试使用React.memo来确保屏幕不会重新渲染，因为props没有发生变化，但它仍然会重新渲染。

以下是代码- 代码沙箱链接 是否有一种方法，可以在第一次加载iFrame并在选项卡之间切换时，iFrame不会再次重新渲染？

- Niraj

---

实际上，使用 useMemo 不会导致组件重新渲染，HTML 会在组件挂载时重新加载 iFrame 的源。我已经使用 useMemo 制作了一个沙盒，并在其中放置了一个 console.count，您可以检查它只被渲染了一次https://codesandbox.io/s/material-demo-5tigs?file=/demo.js - Sabbin

谢谢Sabbin，但我需要在切换选项卡后保持组件的状态。如果我们使用useMemo，在一个选项卡中开始视频，然后切换到另一个选项卡，再切换回来，视频会重新从开头加载。我想避免这种情况。 - Niraj

Answer 1

检查当前标签页的 value 是否等于当前标签页的 index，只有在它们相等时才显示内容。
相反 - 只需保留内容，让 Typography 组件控制其内容的可见性（您已经使用 hidden 在 Typography 组件中实现了此功能）。

<Typography
  component="div"
  role="tabpanel"
  hidden={value !== index}
  id={`simple-tabpanel-${index}`}
  aria-labelledby={`simple-tab-${index}`}
  {...other}
>
  {<Box p={3}>{children}</Box>}
</Typography>

请注意，内容将被呈现，因此如果您在内部有大量内容/向后端发出请求等 - 即使您看不到它们，所有这些内容都将成为您的DOM的一部分。

- Dekel

---

谢谢Dekel。这很有帮助。在这个解决方案中，DOM什么时候会再次被刷新？ - Niraj

在上述解决方案中，DOM 不应该被刷新。如果你想强制刷新，你应该手动执行（更改组件的 props/某些内容）。 - Dekel

Answer 2

TypeScript解决方案：

1. 将选项卡显示组件包装在memo()函数调用中
2. 使用控制逻辑（<div style={...}）包装显示组件
3. 选项卡更改不再重新渲染DOM；选项卡显示组件大小自然流动。可以通过选项卡显示组件中的状态更改触发刷新/更新。

示例代码：

  const SomeTabDisplayComponent = memo(() => {
      return <div>Whatever the tab displays</div>
  })


  const getVisibilityStyle = (hiddenCondition: boolean): any => {
      if (hiddenCondition) {
          return {
              visibility: 'hidden',
              height: 0,
          };
      }
      return {
          visibility: 'visible',
          height: 'inherit',
      };
  };

  <div style={getVisibilityStyle(value !== index)}>
      <SomeTabDisplayComponent />
  </div>

这个解决方案相较于之前的答案有很多优势。它没有使用另一个组件；没有误用“排版”（<p>标记不应包含块内容！这样做对 SEO 和可访问性等都是不利的，违反了 Web 标准）；它不依赖 Typography 内部的“隐藏”实现（如果将来更改，上面的解决方案将会失效），并且它可以完全控制重新渲染 / DOM 刷新发生的时间。

- kyr0