reactjs - 在不同的父级中重新渲染相同的组件，并为其提供不同的内容

Question

我对 React 有点陌生，所以任何建议都会非常受欢迎。

我正在研究这个界面，它最初有两个模块：天气预报（节奏）和幻灯片（我称之为墙纸），它们应该根据间隔无限地相互替换（我稍后会处理） .

它们都包含一些共享的子组件，它们的变化较小。当我在这两个模块之间来回切换时，ReactDOM 是重新渲染它的所有子组件还是区分代码？

第一阶段：

Stage1:

<div id="application">
    <Tempo/>
</div>

第二阶段：

Stage2:

<div id="application">
    <Wallpaper/>
</div>

两者<Tempo/>并<Wallpaper/>分享：

@ = means I have different props for each module

<Header @/>
<Background imgName={"@.jpg"}/>
<Footer @/>

我的屏幕在切换时会闪烁背景图像和其他元素。-_-' （我在 webpack 开发服务器中）

多谢你们。