javascript - 渲染所有可能的元素或根据要求渲染

Question

所以我有一个应用程序，它有一个右侧边栏，它的可见性是通过一个按钮切换的。在那个侧边栏中，[一次] 可以有几件事之一——聊天、帮助、搜索。我正在查看具有类似功能的应用程序中的一些纯 HTML，并注意到它们呈现了所有节点，但只是通过 CSS 隐藏了。

因为我需要做同样的事情，所以我在想用 React 做这件事是否是个好主意。但后来我意识到 React 元素有一个状态，当更新时调用 render 方法。所以我可以使用状态来存储侧边栏是否打开以及侧边栏内的内容。

这是 React 的做事方式吗？是渲染所有节点(即使它们不可见)更好，还是通过状态更改根据请求渲染节点更好？

Answer 1

我的感觉是，只渲染可见的内容是更标准的 React 方式，但在这种情况下，这主要是一个性能决定。如果您渲染所有内容并仅使用 CSS 切换可见性，则第一次渲染将花费更长的时间(但时间差异可能不相关甚至不明显)。如果您只渲染可见的部分，React 需要在每次边栏内容更改时重新渲染一次。 (这也可能不是值得注意的时间。)

如果您想测试性能，我的建议是同时尝试两者。但我认为无论哪种方式都不会出错。