在DOM中多次使用React.render（）可以吗？

107

我想使用React在整个DOM中多次添加组件。这个小提琴显示了我要执行的操作，并且不会引发任何错误。这是代码：

HTML：

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS：

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

我已经看过这个问题了，恐怕通过上述操作，我将冒使React组件相互干扰的风险。该问题的答案建议使用服务器端渲染，这对我来说不是一个选择，因为我正在使用Django服务器端。

另一方面，也许我在做什么就可以了，因为我只安装了一个React库实例（而不是多个组件调用自己的React实例）？

使用多个DOM实例的这种方法是使用React的一种好方法吗？

reactjs

— 摇摇欲坠
source

Answers:

120

是的，React.render在同一页面上多次调用是完全可以的。正如您所建议的那样，React库本身仅加载一次，但是每次调用React.render都会创建一个独立于其他组件的新组件实例。（实际上，这种情况在过渡到React的站点上并不少见，其中页面的某些部分是使用生成的，React.render而另一些不是。）

— 料斗
source

很棒-在“增压”现有Django应用程序方面也非常有用。我想使用Django呈现的内容来获取SEO，并使用React进行用户与DOM元素的交互。这使得实现起来超级简单。

— YPCrumble 2015年

您可能还可以查看shouldComponentUpdate，它将来可能会提高性能（可能不是您的情况）。参考如下：facebook.github.io/react/docs/component-specs.html

— 2015年

@YPCrumble如果跳跃者的回答是正确的，请标记它

— Dana Woodman

那么，如果有多个ReactDOM.render()必须div根据打开的页面在同一位置插入组件的情况，该怎么办？特别是，每页中只有一个丑陋的串联app.js资产<script src="app.js">。然后加载库，例如jQuery，Bootstrap，React，并具有您的自定义JS代码和React组件。如果您参观的/foo话ReactDOM.render(<Foo />, getElemById('content'))。如果您访问/bar', you have ReactDOM.render（<Bar />，getElemById（'content'））`。他们确实干涉。您如何管理这个？

— 绿色的

@Green我不确定我是否理解，如果这些组件位于不同的页面上，它们将如何干扰？否则，为什么不为每个组件添加一个新的容器元素，即：ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— hopper

从页面加载性能的角度来看，这种方法是可行的，但是还有其他缺点，如果可能，应避免使用多个React根。

不同的React根不能共享上下文，并且如果您需要在React根之间进行通信，则需要回退全局DOM事件
时间分段等性能优化（悬念和异步渲染）的收益较少。不可能跨React根边界挂起

更多搜罗-https: //github.com/facebook/react/issues/12700

— 阳顺泰
source