bereaksi AJAX

Bereaksi data komponen dapat diperoleh dengan componentDidMount metode Ajax, sementara akses ke database dari server dapat menyimpan data di negara bagian, dan kemudian kembali render metode this.setState UI.

Bila menggunakan asynchronous memuat data, bongkar perakitan sebelum digunakan componentWillUnmount untuk membatalkan permintaan yang luar biasa.

Contoh berikut menunjukkan Dapatkan terbaru inti Github pengguna berbagi Keterangan:

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} 用户最新的 Gist 共享地址：
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
});

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

Coba »

Kode di atas menggunakan permintaan jQuery Ajax selesai.