React AJAX

2020-05-09

React组件的数据可以通过componentDidMount方法中的Ajax来获取,当从服务段获取数据时可以将数据存储在state中,再用this.setState方法重新渲染UI.
当使用异步加载数据时,再组件卸载前使用componentWillUnmount来取消未完成的请求。
以下实例演示了获取Github用户最新gist共享描述。

class UserGist extends React.Component {
    constructor(props){
        super(props);
        this.stat{username: '',lastGistUrl:''};
    }

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

    componentWillUnmount(){
        this.serverRequest.abort();
    }

    render(){
        return(
            <div>
                {this.state.username}用户最新的Gist共享地址：
                <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
            </div>
        );
    }
}

ReactDOM.render(
    <UserGist soure="https://api.github.com/users/octocat/gists"/>,
    document.getElementBtId('example')
);

以上代码使用jQuery完成Ajax请求。