dom React 中的就绪事件

Question

我有如下一些组件：

Wrapper：包装Loader和Page

加载程序：一些动画

Page: 页面内容

这样的代码：

<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 并显示页面组件。

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

喜欢jQuery：$(window).on('ready')

Answer 1

TL;DR 如果我没理解错的话，答案大概是"not possible"。但还有另一种解决方案...

以下是我认为您正在尝试执行的操作，描述为一系列步骤：

页面开始加载，<Loader />组件显示"page loading"动画
页面加载完成，<Loader /> 组件被删除（或隐藏），<Page /> 组件插入（或显示）"real" 页面内容。

这是问题所在：请记住，您是像这样将 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 中，将加载程序元素紧跟在根 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>

我个人的完整做法可以看这里

dom React 中的就绪事件

dom ready event in React

reactjs

domready