在共享狀態下呈現不同容器中的組件

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方法。