ReactDOM.render 类似于 React 应用程序的 main 方法。所有与 react 相关的概念，如组件、状态和上下文，都从这里开始。你可以在同一个页面上使用同一个容器 DOM 节点或不同的容器 DOM 节点多次调用ReactDOM.render。如果容器是相同的，这将对它执行更新，并且只在必要时改变 DOM 以反映最新的 React 元素。但是如果容器节点不同，它会创建两个不同的 React 根，它们是完全独立的。这两个 React 根之间没有共享状态或上下文，这很像在同一页面上运行两个不同的 React 应用程序。
此外，在将带有ReactDOM.render 的根元素渲染到容器节点后，所有其他后代元素将由 React 在其中渲染，我们无法控制它们的渲染位置（这将在未来发生变化)。
因此，在您的情况下，如果您想在不同的容器节点中呈现这两个组件，您将无法拥有一个保持共享状态或事件处理的 App 组件。但是，您可以创建两个不同的 React 根，并通过 props 在它们之间共享对象和方法。
const data = {/*...*/}
ReactDOM.render(<Component data={data} />,
document.getElementById('component'));
ReactDOM.render(<AnotherComponent data={data} />,
document.getElementById('anotherComponent'));
但是，如果您想在某个时候更改这些道具，则必须手动重新渲染根组件。例如，如果您有一个每秒更新的 counter 变量，您必须使用每个新值重新渲染您的根。
let couter = 0
setInterval(function(){
counter++
ReactDOM.render(<Component data={data} />,
document.getElementById('component'));
ReactDOM.render(<AnotherComponent data={data} />,
document.getElementById('anotherComponent'));
}, 1000)
另一个不错的选择是使用类似 Redux 的状态管理库。您可以拥有一个 store 并在两个根之间共享它。如果您需要在两个根之间共享非常复杂的状态，我强烈推荐这种方法。
const store = createStore(/* ... */)
// ...
ReactDOM.render(
<Provider store={store}>
<Component />
</Provider>,
document.getElementById('component')
);
ReactDOM.render(
<Provider store={store}>
<AnotherComponent />
</Provider>,
document.getElementById('anotherComponent')
);
当你使用 Redux 时，你会将你的 Component 和 AnotherComponent 连接到带有 connect 高阶组件的 store。在后台，这将 subscribe 您的组件更改为 store 并在使用组件的 forceUpdate 方法更改状态时重新呈现组件。因此，您不必手动调用 ReactDOM.render 方法，只要通过向 store 发送操作来更改状态即可。