react js 从服务器获取数据并渲染

Question

我正在使用 React js 和 Biff Flux 实现。我对从服务器实现负载的最佳方式有疑问。

getInitialState: function(){
    return{
      loading: true
    };
},
componentDidMount: function(){
  MyAction.fetchsomeData();
},

storeDidChange: function(){
  var data = MyStore.getsomeData();
  // set state
  this.setState({loading: false});
},
render: function(){
  // wait for render until response from server
  // really?
  if( this.state.loading ){
     return null;
  }
  // do render
}

这是正确的做法吗？有时我有一个控制器加载数据并将其作为 props 发送给它的子组件，但当我必须等待服务器的响应时，我仍然不知道呈现组件的最佳方式。

Answer 1

通常您希望在顶部组件调用 ajax。并且您想通过 props 将数据发送到子组件。

虽然你的方法看起来是正确的。您可以使用 localStorage 第一次缓存响应并显示它，直到从服务器获取原始数据。

这将使您的应用看起来更快。

类似于：

getInitialState: function(){
    // try to return stale state from cache
    // if not available, set loading to true
},
componentDidMount: function(){
  MyAction.fetchsomeData();
},

storeDidChange: function(){
  var data = MyStore.getsomeData();
  // set state and set local storage cache
  this.setState({loading: false});
},
render: function(){
  // wait only if local storage does not have cached stale state
  if( this.state.loading ){
     return null;
  }
  // do render
}

如果您不是在寻找缓存解决方案，那么您的方法就可以了。希望对你有帮助。

react js 从服务器获取数据并渲染

react js fetching data from server and render

javascript

reactjs

reactjs-flux