React，加载时显示根节点的内容答案

【问题标题】：React, display content of root node while loadingReact，加载时显示根节点的内容
【发布时间】：2016-02-12 17:07:26
【问题描述】：

假设我有以下模板：

...
<body>
  <div id="root">Loading...</div>
</body>
...

React 组件是很明显的东西

ReactDOM.render(RootContainer, document.getElementById('root'));

（例子尽量简化）

我想要的是在 React 处理请求时显示 div 的内容，并在加载后用实际应用替换“正在加载...”。

我该怎么做？我看到了一种添加另一个带有“正在加载”消息的 div 并在加载应用程序后将其隐藏的方法，但在我看来这是一种肮脏的方式

【问题讨论】：

标签： reactjs

【解决方案1】：

ReactDOM.render 采用top level API documentation 中所述的可选第三个回调参数，因此您可以执行以下操作：

ReactDOM.render(<App />, document.getElementById('app'), function() {
  document.getElementById('placeholder').style.display = 'none';
});

【讨论】：

谢谢，这正是我在建议中的意思，只是想知道是否还有其他方法可以做到这一点，例如“仅在 React 准备就绪时替换节点内容”
@Chvanikoff 你准备好是什么意思？如果你想阻止渲染，那么也许你应该确保在componentWillMount 或componentWillUpdate 中进行图像预加载/ajax 请求？
初始状态是通过 websockets 加载的，所有的应用程序都是大量的流信息——除非加载了初始状态，否则几乎是一个只有几个链接的空白页面。所以我想要的是在 div 中显示一些信息 - 一种非常简化的服务器端渲染