在 DOM 中多次使用 React.render()可以吗?

我想使用 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>

约翰逊:

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

我已经看到了 这个问题,我担心如果这样做的话,我将面临反应组件相互干扰的风险。这个问题的答案建议使用服务器端渲染,这对我来说不是一个选项,因为我正在使用 Django 服务器端。

另一方面,也许我所做的是可以的,因为我只挂载了 React 库的一个实例(而不是多个组件调用它们自己的 React 实例) ?

这种使用多个 DOM 实例的方式是否可以作为使用 React 的方式?

63646 次浏览

是的,在同一个页面上多次调用 React.render完全没有问题。正如您所建议的,React 库本身只加载一次,但是每次对 React.render的调用都将创建一个独立于其他任何实例的新组件实例。(事实上,这种情况在正在过渡到 React 的站点中并不少见,在这些站点中,页面的某些部分是使用 React.render生成的,而其他部分则不是。)

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

  • 不同的 React 根不能共享上下文,如果需要在 React 根之间进行通信,则需要依靠全局 DOM 事件
  • 性能优化(如 时间切片悬念和异步呈现)带来的好处较少。不可能跨 React 根边界挂起

进一步阅读

如果您想知道多次使用 ReactDOM.render ()是否可以,那么 医生会说: “如果 React 元素之前呈现在[同一]容器中,这将对其执行更新,并且只在必要时修改 DOM 以反映最新的 React 元素”