Question

我的应用有时会收到解析和渲染所需的大量数据。我想解析前几个消息并渲染它们以便为用户提供一些工作，而其余的消息在后台解析。问题是，下图中的第一个渲染不会导致屏幕绘制Chrome，Firefox或Safari。

parse(data, show) {
    if (data === null) {
        ...
    }
    else {
       if (data.length > 100) {
          let taste = [];
          taste.push(data.pop());
          taste.push(data.pop());

          console.log('start');
          const messagePromise = this.props.parser.parseMessages(taste);
          console.log('promise 1 created');

          const restPromise = messagePromise.then(result => {
            console.log('first chunk resolved, setting state!');
            if (this.state.messageDetail === null)
                this.setState({messageDetail: result[0]});
            this.setState({parsedMessages: this.state.parsedMessages.concat(result)});
            return this.props.parser.parseMessages(data);
           });
           console.log('promise 2 created');

           restPromise.then(result => {
              console.log('second chunk resolved, setting state!');
              if (this.state.messageDetail === null)
                 this.setState({messageDetail: result[0]});
              this.setState({parsedMessages: this.state.parsedMessages.concat(result)});
        });
        console.log('leaving parse');
    }

此方法parse作为prop传递给子组件，当他有一些要解析的消息时调用它。还有2个其他子组件显示消息列表和所选消息的详细信息。这些组件将parsedMessages和messageDetail作为道具传递，因此当父级中的状态发生变化时，孩子会重新渲染自己。

有人看到渲染不会导致这样的屏幕绘制的问题吗？我以为我在某个地方阻塞但是在render的日志中看到19:16:34.630让我觉得还有其他事情正在发生。

我正在使用最新的React（15.6.1）和最新的浏览器。

看起来在onClick返回之前页面不会绘制。在promise 2被创建之后但resolve发生之前，我认为这会立即发生。也许我误解了承诺如何运作。

        <RaisedButton onClick={this.handleSubmit.bind(this)} label="Parse" style={leftButtonStyle} secondary={true} disabled={!this.state.parseEnabled}/>

handleSubmit() {
    let messages = this.state.value.split('\n');
    this.props.parser(messages, true);
}

当handleSubmit()返回时{p> this.props.parser(...)应该完成，onClick()绑定到handleSubmit()并且this.props.parser()绑定到上面的parse()方法我们可以从控制台日志中看到退出19:16:34:619

Answer 1

https://github.com/facebook/react/issues/7678中的bloodyowl解决了这个问题。仍然不确定为什么一个承诺是不够的（可能是因为它正在被编译？）但是如果你在{{1中执行它 - 那么做初始的部分render()然后在componentDidUpdate() - 是行不通的回调 - 在setState()中包装阶段2处理会破坏链，以便允许初始渲染绘制。

在第一个承诺解决后，从Promise中反应2阶段渲染

1 个答案: