ajax和json对于reactjs来说主要是表现形式不同，但最终都会变成js object，根据具体情况不同而选择。

比如我们建立一个用于筛选网站提供能够的服务项目（service）的页面，这个页面大概如下所示

class ServiceList extends React.Component{ constructor(props){ super(props) this.state={ //我们使用state里面的services来保存所有的service //刚开始的时候，内容为空 services:[], //这里的view决定了我们要显示哪些service view:"type_a" } } render(){ //当react库运行到render方法的时候,就会遍历所有state中service的项目 let serviceShows = this.state.services.map((service,index)=>{ //如果这个service的type和当前view相符，就把他添加到待显示内容的array中去 if(service.type === this.state.view){ return 
{service}
 //看到有说用index做为key是anti-pattern，这个我也没有过多研究 //更好的方法肯定是用一些明确能代表数据的值，比如service.id这样会更好 //但是有时候通过相同的index来欺骗react让他相信两个element是同一个element，又会有一些妙用 //比如假如这里每个service会显示一个根据需要长度不同的label，css上面做一个transition效果 //然后services分两批显示，即数量除以2，每次显示一半 //如果使用不同的key，比如service.id，那么你会看到element不同的时候它们只是简单的被替换了 //而如果总是使用每一批的index，那么你会看到label有一个动态的长度变换效果 //因为react被我们欺骗了，label没有被替换，只是长度变化，所以css动画效果就生效了 } }) return( 
 {//这里，我们把待显示内容显示出来} {serviceShows} 
 ) } //可以看到，我们的类被构造的时候本身自带的state中services是个空数组，我们需要用内容填充他 //查看react的文档的《组件生命周期》这一页（这一页很重要，一定要明白各个函数在什么情况下会被触发），发现它建议我们在每个组件显示完毕 //之后使用componentDidMount函数来获取需要的数据，那就照做 componentDidMount(){ //组件先按照services为空渲染一遍，你可以理解为先把网页框架渲染出来 //渲染完毕之后就调用我们这里这个函数用ajax方法去服务器取数据 let xhr = new XMLHttpRequest() //服务器随你喜欢，你可以用php，也可以用node，只要实现了标准的GET方法即可 //对于post，put，delete等方法同理 //而很显然，假如你的数据没有必要从数据库中提取，或者长期不变，也不怕泄密 //那你完全可以在此请求一个json文件 xhr.open("GET", "http://your.server.com/api/services", true) //根据情况选择是否要随get请求发送用于身份认证的信息 xhr.withCredentials = true xhr.send() xhr.onreadystatechange = () =>{ if(xhr.readyState == XMLHttpRequest.DONE){ if(xhr.status == 200){ //你当然可以用其他方法编码你的返回信息，但是对于js的世界来说，还有什么比json更方便呢？ let gotServices = JSON.parse(xhr.responseText) //好了，我们获得了service列表，使用setState方法覆盖当前元素的services数据 this.setState({ services : gotServices }) } }else{ alert("ajax失败了") } } } //那么我们已经渲染了页面，也从服务器获得了数据，还把数据放到了应该放的位置， //还要做什么才能让我们写的这个component把新数据显示出来呢？ //不用担心，react控制着所有的setState方法， //当他发现你对于某个component设置了新的state之后，他就会告诉那个component去再次执行render方法， //然后你再去看render方法，这次他因为this.state.services的内容不一样了自然就会渲染出不一样的内容啦 //怎么样才能明显的感受到这一前一后两次渲染的存在呢？ //在你的服务器端把刚才ajax请求的接口做个5秒钟的延迟， //你就会明显看到获得返回结果的那一瞬间新内容被刷出来啦 }

React.js 自己的定位是“A JavaScript Library for building user interface”，它的文档称许多人将它用作 MVC 的 V。因此，React.js 不关心你是如何嵌入后端数据的。换句话说，我们怎么使用一个标准的 HTML 元素和后端打交道，就可以把同样的思路运用在 React.js 创造的组件上。

比如，一个input，可以：

的方式从 PHP 得到变量$name。

一个 React.js 组件也可以形如：

ReactDOM.render(React.createElement(HelloMessage, { name: "" }), mountNode);

用标准元素你可以用 AJAX 得到一个值然后（比如用 jQuery 去）操作：

$.ajax(...) .done(function(data){ $('#name').val(data.name); });

用 React.js 时，同样可以在 AJAX 返回时使用你自己定义的方法去更新组件。

关于维护 JSON 信息麻烦的事情，怎么会呢？在 PHP 中echo $var;和echo json_encode($var);的麻烦程度是一个量级的。

后端用nodejs或者php做restful api , 前端react里用jquery的ajax获取数据，然后把数据添加给this.state , 然后在render里把this.state的数据显示出来， 用户交互那块也是ajax获取数据再更新this.state然后react自动更新dom界面

应该就是这样，我也是个菜鸟@—@

通过ajax，先加载网页模板，再加载数据，但是这样会多几次请求

粗暴地在后端把数据直接输出到scirpt标签，作为一个全局对象，随地读取

React.js 结合 Fetch.js

用webpack打包，html文件的body里面什么元素都没有，都是react动态渲染出来的。获取数据使用ajax，赋值给this.state