TL; DR 如果我正确理解，答案可能是“不可能”。但是还有另一种解决方案…
这是我认为您要尝试执行的操作，描述为一系列步骤：
页面开始加载，
<Loader />
组件显示“页面加载”动画页面完成加载，
<Loader />
删除组件（或隐藏<Page />
组件），并使用“真实”页面内容插入（或显示）组件。
问题出在这里：请记住，您是将React组件像这样注入到页面中的：
ReactDOM.render(<Wrapper />, document.getElementById('app'));在加载DOM之前，您实际上无法注入React组件。因此，到那时，要么
<Loader/>出现大约2毫秒然后消失，要么根本不出现（因为DOM在注入页面时已经被加载了）。
如果您尝试显示动感或其他简单动画（例如动画GIF），则可以尝试使用混合方法：
像这样设置您的HTML：
<body> <div id="app"><img src="throbber.gif" /></div></body>
在您的脚本标签中，包括一个JQuery“文档就绪”事件处理程序以加载React组件：
class Page extends Component {}class Wrapper extends Component { render() { return ( <Page /> ); }}$(document).ready(function () { ReactDOM.render(<Wrapper />, document.getElementById('app'));});请注意，我已经省略了
<Loader />-抖动图像正在完成加载程序的工作。
这里的想法是，当页面加载时，动荡的GIF将会动摇起来，直到加载DOM，这时将触发JQuery的document ready事件并
div#app替换内容。
我还没有尝试过，但是它 应该可以 工作，只要React实际上 替换
了的内容
div#app，而不仅仅是在其上添加内容。如果不是这种情况，那么只需将文档就绪处理程序更改为以下内容即可：
$(document).ready(function () { $('div#app img').remove(); ReactDOM.render(<Wrapper />, document.getElementById('app'));});
