Question

我对React.js中的组件加载有疑问。

是否有办法按特定顺序加载组件。例如，我的单页网站的每个页面都有组件我希望<homepage />及其图片首先加载<profile />，然后加载<works />，依此类推...... 这个想法是，当用户第一次访问我的网站时，主页将立即（或非常快）加载，其余的可以跟随，所以至少用户有可能在他们可能开始滚动之前查看。

我试图谷歌“使用react.js按顺序加载组件”，但没有运气。

class MainContent extends React.Component {

  componentDidMount() {
    console.log("component mounted");
  }

  render() {
    return(
      <div className="main-content">

        <ul className="block">
          <HomePage />
          <ProfilePage />
          <WorksPage />
          <ContactPage />
          <BlogPage />
        </ul>

      </div>
    )
  }
}

我的第一个想法是在<componentDidMount />函数中有一个promise，它会在加载<Homepage />时将布尔状态切换为true。

<Homepage />

{
  this.state.loaded ? 
    <ProfilePage />
    <WorksPage />
    <ContactPage />
    <BlogPage />
  :
    null
  ;
}

我是否按照这条思路走上正轨？

非常感谢任何帮助谢谢，
萌

Answer 1

你做得很好。这是recommended方法：

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。 如果您 需要从远程端点加载数据，这是的好地方 实例化网络请求。在这种方法中设置状态会触发重新渲染。

因此，最初在render方法中，只渲染UI上可立即使用的部分。然后在componentDidMount中 - 触发并等待完成您的承诺以获取其余数据，然后调用setState以刷新UI以完整显示。

在React.js中按顺序加载组件的理想方法

1 个答案: