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请求启动并且非常快速地完成，则会阻止备用呈现内容的短暂闪烁。如果将异步操作移动到组件的 parent ，则可以确保异步操作在您渲染孩子之前完成。

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

Answer 3

这更像是一个设计问题吗？你可以显示一个微调器，一个空盒子，一个只有形状的预览（比如Facebook feed），或者什么都没有。

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

Answer 4

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

您可以使用占位符来保持组件的形状。

在请求之后按住React Render

4 个答案: