Reactjs 在react中动态更改根元素有多糟糕

我和一群年轻的dev一起工作，他们是新来的。我有一些经验，但不是专家。他们正在使用react路由器，但对于更改屏幕，他们直接更改根元素。应用程序的文件夹结构最差，看起来很糟糕。我只是想解释一下，如果发布相同的应用程序进行生产，这会对性能造成多大的影响

我正在尝试实施最佳实践，但我仍然需要时间，我们在几天内就要交付

根元素最初是

ReactDOM.render(<Login/>, document.getElementById("root"));

ReactDOM.render（，document.getElementById（“根”）；

单击“编辑”按钮时

function handleEditButton(row){
  ReactDOM.render(<EditShelf shelf={row}/>, document.getElementById("root"));
}

功能手柄编辑按钮（行）{
render（，document.getElementById（“根”））；
}

---

我只是想了解这种做法有多糟糕，以及当该应用程序投入生产时，会产生什么样的主要影响。我认为它可能不会对性能产生太大影响，尽管这是一种可怕的做法

---

就性能而言，它不应该如此糟糕，因为这样，reconicler就必须替换整个主机树，而不必尝试遍历和比较每个节点。

如果页面完全不同，我会说这很好。有一件事我想说的是，调用

unmountComponentAtNode

，->是一个好主意，但是任何外部库如何与这种方法一起工作呢？就像redux material ui一样，它需要一个围绕根组件的包装器。我认为react reconciler不能用这种方法工作。为什么会有问题呢？如果另一个lib编写正确，它应该处理comontDidMount/Unmount等，。。如果您有一个无法处理已装载/卸载的组件，则问题在于该组件。

ReactDOM.render（，document.getElementById（'root'）如果我不断地替换根元素，我将如何做到这一点？因此，现在还可以，但必须进行重构以使用react router进行导航，这是一种正确的方法吗？是的，您肯定应该为应用程序使用单个入口点组件，然后使用react router之类的路由器。