在初始化 ReactJS 应用程序之前是否需要等待窗口加载事件？答案

【问题标题】：Is it necessary to wait for window load event before initialising a ReactJS app?在初始化 ReactJS 应用程序之前是否需要等待窗口加载事件？
【发布时间】：2018-03-15 19:51:00
【问题描述】：

在初始化 React 应用之前是否有任何理由等待窗口加载事件？

window.addEventListener('load', () => {
   ReactDOM.render(
     <h1>Reactastic!</h1>,
     document.getElementById('rootElement')
   );
}, false);

只要rootElement是在html中定义的，不是被javascript隐藏或动态创建的，有没有可能它无法及时被React初始化？

编辑：这也是假设在页脚中加载了 javascript。

【问题讨论】：

如果你在 html 之后找到你的 JavaScript，那么应该加载 rooltElement。
老实说，我以前从来没有想过，我只是使用默认的 React 生命周期方法......会尝试。
您还应该假设这是最后一个脚本元素或所有后续脚本（包括 html5 异步脚本）不会侵入性地更改 'root' 内呈现的 dom 树...

标签： javascript html reactjs dom virtual-dom

【解决方案1】：

ReactDom 渲染器会将所有内容安装在容器元素中，因此，react 唯一需要（*）的是渲染调用时现有的“根”元素。鉴于您的假设，这是正确的，因此在这种情况下您不需要等待 onload()。

(*)当然，在 render() 之后评估的任何脚本侵入性地操作“根”元素内的 dom 都可以（并且可能会）破坏反应逻辑......

【讨论】：

【解决方案2】：

假设 javascript 在页面底部加载，没有理由等待文档加载，因为 rootElement 已经在 DOM 中可用。

【讨论】：

在所有浏览器中都能保证 100% 的时间吗？假设 html 设置正常（并且没有被其他脚本以任何方式操作）并且 javascript 在页脚中加载
是的，它适用于所有浏览器。如果将脚本添加到 rootElement 下方的 DOM 中，则会由 document.getElementById 或 document.querySelector API 返回。