Question

在使用香草JS和jQuery多年后，我目前正在学习React。

我需要预加载一些Web字体，将来可能会添加图片，音频，视频等……真的。这个问题可能与在屏幕上呈现某些内容之前需要执行的许多实用程序有关。

我一直以这种方式来处理-加载内容，然后设置一个我可以用来确定呈现内容的变量（在这种情况下，变量是在Redux存储中设置的）。

我的preload.js代码如下：

import WebFont from 'webfontloader';
import store from 'js/store/store';
WebFont.load({
  custom: {
    families: ['MyCustomFont']
  },
  active: function(){
    store.dispatch.data.setPreloadedFonts();
  }
});

我的index.js应用代码可以简化为：

import preload from './preload';
class App extends React.Component {
  render() {
    if(
      this.props.preloadedFonts &&
      this.props.ajaxDataLoaded &&
      this.props.miscOtherStuffDone
    ){
      return (
        <div>
          <Switch>
            // My app routes here…
          </Switch>
        </div>
      )
    }else{
      return (
        <div className="preloader"></div>
      )
    }
  }
}

这一切都很好，很容易，并且使用的代码很少。

但是，React给我一个警告：“预加载”已定义但从未使用过-没有未使用的变量

我了解为什么会发生这种情况-必须导入“预加载”，但不能在组件内积极使用。通过阅读并查看其他一些插件，我猜测这不是做事的“反应方式”，而我的预加载器应采用包裹我的应用程序的组件形式-例如<Preloader></Preloader>

我应该采用某种特殊的方式来处理这种事情吗？感觉任何其他替代方法都可能会变得更加复杂和缺乏灵活性。

如何构造预加载实用程序代码

0 个答案: