【React】 异步解决方案

时间：2016-08-15 17:38:54
作者：zhongxia
地址：

React 异步解决方案

1. React官方提供的解决方案 Load Initial Data via AJAX

使用jQuery的Ajax方法，在一个组件的 componentDidMount()
中发ajax请求，拿到的数据存在组件自己的state中，并调用setState
方法去更新UI。如果是异步获取数据，则在 componentWillUnmount
中取消发送请求。

如果只是为了使用jQuery的Ajax方法就引入整个jQuery库，既是一种浪费又加大了整个应用的体积。那我们还有什么其他的选择吗？事实上是有很多的：fetch()、fetch polyfill、axios...其中最需要我们关注的是window.fetch()
,它是一个简洁、标准化的javascript的Ajax API。在Chrome和Firefox中已经可以使用，如果需要兼容其他浏览器，可以使用fetch polyfill。

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

2. 项目如何组织Ajax请求

React官方文档，告诉我们单个组件如何获取数据，但是没有告诉我们项目中，如何组织Ajax的请求，并且把数据保存在哪里？如果这部分没有规范，多个协作开发的话，会让项目混乱，难以维护。

1. 把所有数据保存在 根组件

2. 把数据保存在各个模块入口组件

3. redux 解决方案

参考文章：

1. React 最佳实践 - 那些 React 没告诉你但很重要的事
   

您可能还感兴趣？

1. 前端技术文章汇总