Question

我有一些如下组件：

包装器：包装Loader和Page

Loader：一些动画

页面：页面内容

像这样的代码：

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

Answer 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“document ready”事件处理程序来加载React组件：

class Page extends Component {}

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

$(document).ready(function () {
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});

请注意，我遗漏了<Loader /> - throbber图像正在执行加载程序的工作。

这里的想法是，当页面正在加载时，throbber GIF会一直悸动，直到DOM被加载，此时JQuery的文档就绪事件将会触发。 div#app的内容将被替换。

我没有试过这个，但应该工作，前提是React实际上替换 div#app的内容，而不仅仅是添加内容。如果情况并非如此，那么将文档就绪处理程序更改为以下内容就是一件简单的事情：

$(document).ready(function () {
    $('div#app img').remove();
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});

Answer 2

我最终使用的方法（不需要JQuery）如下：

在index.html中，将loader元素放在根div后面

<div id="root">
</div>
<div id="preloader" class="pre-loader">
  <img src="..."> </img>
</div>

然后在index.js中：

document.addEventListener("DOMContentLoaded", function(event) { 
  
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
    <BrowserRouter>
      <DashApp />
    </BrowserRouter>
    </Provider>
    </React.StrictMode>,
    document.getElementById("root")
  );

  const loadingScreen = document.getElementById("preloader");
   loadingScreen.style.opacity = 0;
   loadingScreen.style.display = "none";
});

因此，基本上，我们只是对其他答案提出了类似的建议，但是由于不需要JQuery，我们使用以下方法监听加载事件

document.addEventListener("DOMContentLoaded", function(event) { }

另一种方法是将加载程序放在根div内，这意味着React加载时默认会覆盖它：

<div id="root">
  <div id="preloader" class="pre-loader">
    <img src="..."> </img>
  </div>
</div>

我个人的完整方法可以在此看到

React中的dom ready事件

2 个答案: