共享状态时渲染不同容器中的组件

Question

我有一个由WordPress预先呈现的HTML页面和三个React组件：

HTML页面中有两个ID div容器（divID=“component”和divID=“anotherComponent”），它们是分开的，我想在上面呈现React组件。他们也有一些共同的状态。我想使用

我想使用ReactDOM。渲染（

用这个最好的方法是什么？




Answer 1

ReactDOM。render类似于React应用程序的主要方法。所有与react相关的概念（如组件、状态和上下文）都从这里开始。您可以调用ReactDOM。使用相同的容器DOM节点或不同的容器DOM节点在同一页面上多次呈现。如果容器是相同的，这将对其执行更新，并且仅根据需要对DOM进行修改以反映最新的React元素。但是，如果容器节点不同，它将创建两个不同的React根，并且它们彼此完全独立。这两个React根之间没有共享状态或上下文，这与在同一页面上运行两个不同的React应用程序非常相似。

另外，在使用ReactDOM呈现根元素之后。将渲染到容器节点中，所有其他子体元素都将通过React在其中渲染，我们无法控制它们渲染的位置（这将在将来更改）。

因此，在您的情况下，如果您希望在不同的容器节点中呈现这两个组件，您将无法拥有保持共享状态或事件处理的应用程序组件。但是你可以创建两个不同的根，并通过道具在它们之间共享对象和方法。

const data = {/*...*/}

ReactDOM.render(<Component data={data} />,
  document.getElementById('component'));

ReactDOM.render(<AnotherComponent data={data} />,
  document.getElementById('anotherComponent'));

但是，如果您想在某个时候更改这些道具，则必须手动重新加载根组件。例如，如果您有一个每秒更新的计数器变量，则必须用每个新值重新命名根。

let couter = 0

setInterval(function(){
  counter++

  ReactDOM.render(<Component data={data} />,
    document.getElementById('component'));

  ReactDOM.render(<AnotherComponent data={data} />,
    document.getElementById('anotherComponent'));

}, 1000)

另一个好的选择是使用类似Redux的状态管理库。您可以拥有一个存储，并在两个根之间共享它。如果您需要在两个根之间共享一个非常复杂的状态，我强烈推荐这种方法。

const store = createStore(/* ... */)

// ...

ReactDOM.render(
    <Provider store={store}>
        <Component />
    </Provider>,
    document.getElementById('component')
);

ReactDOM.render(
    <Provider store={store}>
        <AnotherComponent />
    </Provider>,
    document.getElementById('anotherComponent')
);

使用Redux时，将您的组件和另一个组件连接到存储和高阶组件。在引擎盖下，这将订阅组件以存储更改，并在使用组件的forceUpdate方法更改状态时重新提交组件。因此，您不必手动调用ReactDOM。只要通过向存储分配操作来更改状态，就可以使用render方法。