在共享状态下呈现不同容器中的组件

Question

我有一个由WordPress和三个React组件预渲染的HTML页面：<App />，<Component />和<AnotherComponent />。

但是也有一些分离的HTML页面（DIV ID =“组件”和DIV ID =“anotherComponent”）内的两个ID DIV容器和我要渲染的反应的组分。他们也分享一些状态。我想用<App />编写所有的逻辑和事件处理，然后将状态（this.props.counter）传递给每个组件。

我想用ReactDOM.render(<Component />, document.getElementById('component'));每个组件和使用<App />控制逻辑，但我怎么会在<App />通状态的每个组件，并且会是什么我render()。

什么是去与这一个最好的方法是什么？

Answer 1

ReactDOM.render就像阵营应用的主要方法。所有反应相关的概念，如组件，状态和上下文都从这里开始。您可以在同一页面上多次调用ReactDOM.render，使用相同的容器DOM节点或不同的容器DOM节点。如果容器相同，则会对其执行更新，并且只根据需要更改DOM以反映最新的React元素。但是，如果容器节点不同，它将创建两个不同的React根，并且它们完全相互独立。这两个React根目录之间没有共享状态或上下文，就像在同一页面上运行两个不同的React应用程序一样。

此外，在将根元素与ReactDOM.render渲染到容器节点后，所有其他后代元素将由React渲染到其中，并且我们没有任何控制权来更改它们呈现的位置（这将在未来发生变化） 。

所以你的情况，如果要呈现不同的容器节点这两种成分，你将不能够有一个应用程序组件，它保持了共享状态或者事件处理。但是，你可以创建两个不同的React根，并通过道具在它们之间共享对象和方法。

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') 
); 

当您使用终极版，连接您的Component和AnotherComponent到store与connect高阶组件。在引擎盖下，这将subscribe您的组件到store更改并重新组件的状态时使用组件的forceUpdate方法更改。因此，只要您通过向商店分派操作来更改状态，您就不必手动调用ReactDOM.render方法。