首先:React本身没有独有的获取数据的方式。实际上,就React而言,它甚至不知道有服务器画面的存在。
React只是简单地渲染组件,单独从两个地方获取数据:props 和 state。
因此,为了使用服务器的数据,你需要在你的组件(component)的props或state里拿到数据。
你可以将这个过程与服务和数据模型复杂化,就像你所希望的那样,但最终只是组件渲染props和state。
选择一个HTTP 库
为了获取来自服务器的数据,你需要一个HTTP库,网上有很多,最终他们都做同样的事情,但他们有不同的特点。
喜欢 Promise?那就选axios吧:mzabriskie...
讨厌Promise?,但是喜欢callback?不妨看看superagent
当然,你也可以选择自己封装一个ajax库,我喜欢Axios,下面将以这个库作为例子,如果你不喜欢,可以选择其他库看看。
Fetch Data
如下是一个简单的实例,一个组件从subreddit获取职位。看看这个例子,我们将会了解它是如何工作的
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
axios.get(`r/${this.props.subreddit}.json`)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ posts });
});
}
render() {
return (