推迟阵营渲染，直到请求

后我的影片被加载初始状态的组件：推迟阵营渲染，直到请求

getInitialState: function() { 
    return { 
     panel: "deals", 
     showExtension: false, 
     person: {} 

    }; 
    },

而且我有这样找一个人：

componentDidMount: function() { 
    this.findPersonFromBackground(); 
    }, 
    findPersonFromBackground: function() { 
    chrome.runtime.sendMessage({ action: "findPerson", email: this.props.currentEmail.from_email }, function(person) { 
     this.setState({person: person}); 
    }.bind(this)); 
    },

所以一切工作正常。如果找到了这个人，我会提出一件事，如果没有，则提供其他的东西。

当找到第一个时，由于API调用相当快，视图从非找到状态变为真正的快速状态。

在第一次通话回来之前等待呈现的最佳方式是什么？

来源

2014-09-25 brandonhilkert

你可以处理它的一种方法是与枚举模式。在此代码中，this.state.person是加载标记，未找到标记或实际人员。

var status = {loading: {}, notFound: {}}; 

// ... 

getInitialState: function(){ 
    return {person: status.loading} 
}, 
fetchPerson: function(){ 
    doFetchPerson(function(person){ 
    if (person) this.setState({person: person}) 
    else this.setState({person: status.notFound}) 
    }.bind(this)) 
}, 
render: function(){ 
    var person = this.state.person) 
    if (person === status.loading) ... 
    else if (person === status.notFound) ... 
    else ... 
}

来源

2014-09-25 22:11:08 FakeRainBrigand

很棒的反馈。我非常喜欢这种方法，因为我认为我最初将'person'设置为'{}'的绑定与查询该人并返回时找不到'{}'是一样的。根据不同的状态来分离2会有很大的意义，并且更容易呈现正确的组件来传达该消息。谢谢！ – brandonhilkert 2014-09-26 02:07:57

出于好奇，是不是'status.loading === status.notFound'？ – brandonhilkert 2014-09-26 16:46:14

@brandonhilkert对象通过引用进行比较，而不是内容，所以'{}！== {}'和'[]！== []'等等。 – FakeRainBrigand 2014-09-26 17:33:11

这是更多的设计问题吗？您可以显示一个微调框，一个空框，一个仅限形状的预览（如Facebook提要），或者根本不显示任何内容。

如果这是一个技术问题，则在render（）中返回null。

来源

2014-09-25 21:37:47 Rygu

也许两者都有一点。至少这些评论让我想到了两者。谢谢！ – brandonhilkert 2014-09-26 02:05:48

有做你问什么，这是从呈现在所有直到该组件启动完成一些异步操作保持一个部件没有什么好办法;你可以做的最好的方法就是使用这个问题的其他答案中的技巧，在不完整的情况下呈现稍微不同的东西。

但是，实际上您试图解决的问题是，如果API请求开始并很快完成，则会阻止交替呈现内容的短暂闪烁。如果将异步操作移动到组件的父，则可以确保异步操作在您甚至提交您的孩子之前完成。

如果Chrome运行时请求一直很快，这可能没有问题，但在一般情况下，如果异步操作需要较长时间才能完成，则值得考虑行为。

来源

2014-09-25 22:16:54

您对时序有一个好的观点。当API响应不够快时，我没有考虑过95分位数。在那种情况下，在决定返回之前留下一个空白空间并不是最佳选择。伟大的观点要考虑。 – brandonhilkert 2014-09-26 02:05:07

也许你需要这个项目：https://github.com/toplan/react-hold

您可以使用占位符，让您的组件的形状。

来源

2017-07-04 08:43:21

会很好，如果您可以添加如何解决您的项目问题的示例 – ajimix 2017-07-04 09:03:07

这些是项目中的一些示例。请参阅：https：//github.com/toplan/react-hold/tree/master/examples – 2017-07-06 07:57:05

推迟阵营渲染，直到请求

回答

相关问题