Question

我想使用React在整个DOM中多次添加组件。 This fiddle显示了我要做的事情，并没有出现任何错误。这是代码：

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

我见过this question，我担心通过上述操作，我会冒险让React组件相互干扰。这个问题的答案建议使用服务器端渲染，这对我来说不是一个选项，因为我正在使用Django服务器端。

另一方面，也许我正在做的是好的，因为我只安装了一个React库的实例（而不是多个组件调用它们自己的React实例）？

这种使用多个DOM实例的方法是否可以使用React？

Answer 1

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

Answer 2

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

不同的React根不能共享上下文，如果需要在React根之间进行通信，则需要回退全局DOM事件
time slicing这样的性能优化-悬念和异步渲染带来的好处较少。不可能跨React根边界暂停

更多收获-https://github.com/facebook/react/issues/12700

Answer 3

如果您想知道是否可以在同一个容器中多次使用 ReactDOM.render()，docs 会说：“如果 React 元素之前被渲染到 [ same] 容器，这将对其执行更新，并且仅在必要时改变 DOM 以反映最新的 React 元素"

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

3 个答案: