Question

我在网络应用程序中呈现页面在呈现UI之前，页面需要初始化几个子组件并填充数据。

假设我有3个子组件称为compA，CompB和compC，需要在组件UserView可以呈现之前使用数据进行初始化显示给最终用户。

我如何告诉UserView它可以呈现？
我将使用React组件作为示例，但实际上我正在寻找一种解决此类问题的首选解决方案（请参阅下面的代码解释）：

var UserView = React.createClass({

  getInitialState: function() {
    return {
        readyToRender: false
    };
  },

  componentWillMount: function() {
    initComp("A");
    initComp("B");
    initComp("C");
  },

  initComp(component): function() {
    // do stuff
    reportReady(component);
  },

  render: function() {
    if (this.state.readyToRender) {
        return (
            <div>
            <CompA data={this.state.compAdata} />
          <CompB data={this.state.compBdata} />
          <CompC data={this.state.compCdata} />
          </div>
        );
    } else
        return false;
  }
});

对于那些不熟悉React的人：
调用getInitialState一次以设置初始状态UserView 在componentWillMount之前呈现UserView之前，系统会调用render 只要render的状态发生变化并且需要重新渲染组件，就会调用UserView。

这种设计模式是否更适合解决这个问题？此外，我将如何实施reportReady(component)以及如何存储结果？（也许是一系列布尔？）

Answer 1

我认为这是用数组调用initComp的更好方法，就像这样：

  componentWillMount: function() {

    // note: initComp take arrray as argument
    initComp(["A", "B", "C"]);

  },

  // initComp take arrary as argument now
  initComp: function(components) {

    // reportReady function
    let reportReady = components => {

        let initTasks = components.map(component => {

            return new Promise((resolve, reject) => {

                // do stuff here,
                // initialize each component

            });
        });

        return Promise.all(initTasks);
    }

    // invoke reportReady
    reportReady(components).then(/* do what you want with result, you can store them in somewhere else */);
  },

报告他们已完成的流程的设计模式（在React中）

1 个答案: