React如何从后端获取数据并渲染到前端?
我们知道,传统的后端开发,是在页面结构中嵌入数据,在服务器中解析出来,例如:
//test.php
一旦访问了test.php,那么服务器端的PHP解释器就会把 里面的代码进行解释,转换为hello,返回给浏览器。
那么问题来了,我现在有一个react 组件,但是在react组件中不能直接嵌入php等后端代码,(因为实在前端完成解析/渲染),所以想请问如何更好与嵌入后端数据?
想到的办法是:
Ajax异步请求,获取结果并插入?
后端把数据输出到JSON文件中,在前端读取JSON并渲染页面? (如果数据有变,那维护这个JSON文件岂不也是一件麻烦事?)
想请问各位如何处理这个问题?
回复内容:
初学react,理解不对请指出:D
我们知道,传统的后端开发,是在页面结构中嵌入数据,在服务器中解析出来,例如:
//test.php
一旦访问了test.php,那么服务器端的PHP解释器就会把 里面的代码进行解释,转换为hello,返回给浏览器。
那么问题来了,我现在有一个react 组件,但是在react组件中不能直接嵌入php等后端代码,(因为实在前端完成解析/渲染),所以想请问如何更好与嵌入后端数据?
想到的办法是:
Ajax异步请求,获取结果并插入?
后端把数据输出到JSON文件中,在前端读取JSON并渲染页面? (如果数据有变,那维护这个JSON文件岂不也是一件麻烦事?)
想请问各位如何处理这个问题?
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}
}
})
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失败了")
}
}
}
//那么我们已经渲染了页面,也从服务器获得了数据,还把数据放到了应该放的位置,
//还要做什么才能让我们写的这个element把新数据显示出来呢?
//不用担心,react控制着所有的setState方法,
//当他发现你对于某个element设置了新的state之后,他就会告诉那个element去再次执行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: "=$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
上一篇: Builder模式使用教程