javascript - react : hiding vs removing components

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.


11 个月前关闭。







Improve this question




这个问题更多的是关于架构而不是编码。
情况就是这样。在 React 中，有时我们想要隐藏组件。例如，当用户在 SPA 中打开新页面时，当某些 toast 关闭时等。我们可以通过添加 display: none 来隐藏它们。 .或者我们可以将它们从虚拟 DOM 中移除。

// Hidden div
<div style={{ display: 'none' }}/>

// Removed div
{false && <div/>}

然后我们的一些老年人使用第一个变体。即使他们隐藏了整个页面。这就是他们对这种方法的评价:“这种情况下 React 会预渲染所需的内容，因此当内容必须出现时，它会花费更少的时间”。
但在这种情况下，我们不能使用生命周期钩子(Hook)，因为即使组件隐藏，它也不会被移除。但我认为主要问题是真正的 DOM 变得巨大。这会带来缓慢，不是吗？
那么，什么更好呢？

我没有找到任何关于这个问题的对话。也许你可以帮助我。

编辑1:尽管有一些答案我想知道更多的意见。所以，我决定开一个赏金

Answer 1

让我们比较一下这两种切换 HTML 元素可见性的方法之间的一些差异，元素切换 (又名 display: none|block )和 JSX 短路渲染

简单 - 如您所知，JSX 已针对响应式切换标记进行了优化，因此它不会打印 false , true , null和 undefined ，因此您可以在其中编写更短的逻辑。 Facebook https://facebook.github.io/jsx/#why-not-template-literals 提出了不使用模板文字代替 JSX 的类似案例.简单导致可维护性，从长远来看，它将帮助您的应用程序不会成为另一个意大利面胡说八道。

  isShown && <div />

对比

 <div style={{ display: isShown ? 'block' : 'none' }} />

业绩 - 跨越更多节点对性能和内存使用没有好处，通常它会因应用程序而异。可以使用 Chrome 的 Performance Monitor 或 React Profiler 对其进行基准测试。但更重要的是，React 围绕您将遵循的知识构建了新的性能优化 https://reactjs.org/docs/jsx-in-depth.html而不是使用其他技巧。鉴于您的部分或大部分代码库正在使用 element toggling方法，并且有一个新版本的 React 可以提高性能，您可能会花费数周时间进行重构以从中受益。

错误 - 对于 JSX 短路渲染，你必须记住不要使用 elements.length && elements.map(({ text }) => text) 之类的东西鉴于 elements数组没有成员，JSX 将打印 0 而不是什么都没有。另一方面，使用 display: block 设置可见性几乎肯定会导致flex , inline , inline-block , table要设置为 block 的元素.第二个错误更难找到，因为您需要处理 css 样式或 css-in-js。

一致性 - 鉴于 JSX 短路渲染是 React 维护者推荐的方法，它将出现在大多数 React 项目中。但是假设你将它与老式的显示切换方法混合使用，任何加入团队的新开发人员都会质疑你为什么同时使用这两种方法。混合这些很可能会导致错误，其中一个元素可能由 JSX 显示并同时被 display: none 隐藏或相反亦然。

调试 - 在将大量元素设置为 display: none 时使用 React Devtools 或 Elements是一场噩梦，因为它会被你根本不需要的节点污染

我认为高级开发人员习惯于使用 display 切换元素因为它被认为是老学校。它也可能是将您的应用程序从 jQuery 转换为 React 的遗留问题。这是在过去制作 UI 的唯一方法。一些习惯，或者我应该说心智模型是很粘人的。现在，在 React 项目中，我将把上述内容视为 hack。
我建议不要使用任何其他方式在 React 中切换标记的可见性，但标准 JSX 短路渲染 isShown && <div /> .在我编写 React 应用程序的长期经验中，我尝试坚持使用最简单和最具表现力的代码，从大学毕业生、大三学生到大四的所有开发人员都希望按照最佳实践进行阅读，因此他们重用而不是而不是编写同一组件的第 n 个版本。
编辑:正如在其他答案中提到的那样，过渡动画通常使用 react-transition-group 包完成，该包仅适用于 JSX 短路渲染。