渲染所有可能的元素或根据要求渲染答案

【问题标题】：Render all possible elements or render on request渲染所有可能的元素或根据要求渲染
【发布时间】：2016-05-24 12:31:08
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

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

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

【讨论】：

我觉得重新渲染是更 React 的方式。但是，是的，这似乎取决于有多少人将在选项卡之间切换以及默认连接速度/发送数据是多少。
我建议不要在每个选项卡切换的侧栏中获取信息，因为该持续时间肯定会很明显。但是您仍然可以让数据处于元素状态，而无需渲染它。