React中的dom ready事件

小编典典

React中的dom ready事件

reactjs

我有一些如下所示的组件：

包装器：包装加载器和页面

加载器：一些动画

页面：页面内容

像这样的代码：

<body>
  <div id="app"></div>
</body>

class Loader extends Component {}

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Loader/>
            <Page />
        );
    }
}

ReactDOM.render(<Wrapper />, document.getElementById('app'));

在DOM完全加载之后，我想隐藏Loader并显示Page组件。

我应该如何在 React中 编写dom ready事件？

像jQuery： $(window).on('ready')

阅读 1199

2020-07-22

共1个答案

小编典典

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

2020-07-22