在请求之后按住React Render

Question

我有一个正在加载初始状态的组件:

  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调用非常快.

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

Answer 1

没有什么好方法可以做您所要求的，即在组件启动的某些异步操作完成之前完全不渲染组件；你能做的最好的事情是使用来自其他答案的技术来呈现一些略有不同的东西，如果它不完整。

但是，您实际尝试解决的问题是，如果 API 请求开始并很快完成，则阻止交替渲染内容的短暂闪烁。如果将异步操作移至父级组件，则可以确保异步操作在渲染子级之前完成。

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

Answer 2

处理它的一种方法是使用枚举模式。在此代码中，this.state.person可以是正在加载的哨兵、notFound 哨兵或实际的人。

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 ...
}