React组件隐藏还是重新创建？

Question

我正在构建一个reactjs应用程序，我有两个用于呈现组件的选项

1. 一个是隐藏组件并将另一个组件添加到顶部 具有相同的空间和不同的布局。

2. 另一个选项是重新渲染并为两个组件重新创建DOM 分开。

React使用diff算法来比较和更改DOM的状态，因为组件已经存在于DOM中，因此第一个解决方案可以更快地运行。但它将拥有比第二种解决方案更多的内存数据。

另一方面，在第二个解决方案中，我们必须删除一个组件的DOM，渲染另一个组件并再次为它创建DOM。这看起来很多工作！

我很困惑，我应该遵循哪种方法？

这可以描述为：

<Component1/>
<Component2/>

解决方案1：Hide <Component1/> and Append <Component2/> in the same space.

解决方案2：Remove <Componen1/> and Append <Component2/> in the same space

Answer 1

您过早地进行了优化。您可能已经花费了更多的工程时间来解决这个问题。选项2更易于实现，更易于推理，并且是使用React时的快乐路径。

如果在您构建它之后，您觉得它的执行速度太慢，那么您应该进行一些性能分析并找到瓶颈。不要担心选项1，直到且仅当此分析表明DOM元素的重新创建是瓶颈时。