React如何从后端获取数据并渲染到前端？
初学react，理解不对请指出：D
我们知道，传统的后端开发，是在页面结构中嵌入数据，在服务器中解析出来，例如：
//test.php
<body>
<?php
$var = "hello";
echo $var;
?>
</body>一旦访问了test.php，那么服务器端的PHP解释器就会把 里面的代码进行解释，转换为hello，返回给浏览器。
那么问题来了，我现在有一个react 组件,但是在react组件中不能直接嵌入php等后端代码，（因为实在前端完成解析/渲染），所以想请问如何更好与嵌入后端数据？
想到的办法是：
Ajax异步请求，获取结果并插入？
后端把数据输出到JSON文件中，在前端读取JSON并渲染页面？ （如果数据有变，那维护这个JSON文件岂不也是一件麻烦事？）
想请问各位如何处理这个问题？
回复内容：
初学react，理解不对请指出：D
我们知道，传统的后端开发，是在页面结构中嵌入数据，在服务器中解析出来，例如：
//test.php
<body>
<?php
$var = "hello";
echo $var;
?>
</body>一旦访问了test.php，那么服务器端的PHP解释器就会把 里面的代码进行解释，转换为hello，返回给浏览器。
那么问题来了，我现在有一个react 组件,但是在react组件中不能直接嵌入php等后端代码，（因为实在前端完成解析/渲染），所以想请问如何更好与嵌入后端数据？
想到的办法是：
Ajax异步请求，获取结果并插入？
后端把数据输出到JSON文件中，在前端读取JSON并渲染页面？ （如果数据有变，那维护这个JSON文件岂不也是一件麻烦事？）
想请问各位如何处理这个问题？
ajax和json对于reactjs来说主要是表现形式不同，但最终都会变成js object，根据具体情况不同而选择。
比如我们建立一个用于筛选网站提供能够的服务项目（service）的页面，这个页面大概如下所示
<code>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 <div className="one-service" key={index}>{service}</div>
}
})
return(
<div>
{//这里，我们把待显示内容显示出来}
{serviceShows}
</div>
)
}
//可以看到，我们的类被构造的时候本身自带的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秒钟的延迟，
//你就会明显看到获得返回结果的那一瞬间新内容被刷出来啦
}</code>
React.js 自己的定位是“A JavaScript Library for building user interface”，它的文档称许多人将它用作 MVC 的 V。因此，React.js 不关心你是如何嵌入后端数据的。换句话说，我们怎么使用一个标准的 HTML 元素和后端打交道，就可以把同样的思路运用在 React.js 创造的组件上。
比如，一个 input，可以：
<input id="name" name="name" value="<?=$name?>">
的方式从 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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.
7 PHP-Funktionen, die ich leider vorher nicht kannte
Nov 13, 2024 am 09:42 AM
Wenn Sie ein erfahrener PHP-Entwickler sind, haben Sie möglicherweise das Gefühl, dass Sie dort waren und dies bereits getan haben. Sie haben eine beträchtliche Anzahl von Anwendungen entwickelt, Millionen von Codezeilen debuggt und eine Reihe von Skripten optimiert, um op zu erreichen
So richten Sie Visual Studio-Code (VS-Code) für die PHP-Entwicklung ein
Dec 20, 2024 am 11:31 AM
Visual Studio Code, auch bekannt als VS Code, ist ein kostenloser Quellcode-Editor – oder eine integrierte Entwicklungsumgebung (IDE) –, die für alle gängigen Betriebssysteme verfügbar ist. Mit einer großen Sammlung von Erweiterungen für viele Programmiersprachen kann VS Code c
Erklären Sie JSON Web Tokens (JWT) und ihren Anwendungsfall in PHP -APIs.
Apr 05, 2025 am 12:04 AM
JWT ist ein offener Standard, der auf JSON basiert und zur sicheren Übertragung von Informationen zwischen Parteien verwendet wird, hauptsächlich für die Identitätsauthentifizierung und den Informationsaustausch. 1. JWT besteht aus drei Teilen: Header, Nutzlast und Signatur. 2. Das Arbeitsprinzip von JWT enthält drei Schritte: Generierung von JWT, Überprüfung von JWT und Parsingnayload. 3. Bei Verwendung von JWT zur Authentifizierung in PHP kann JWT generiert und überprüft werden, und die Funktionen und Berechtigungsinformationen der Benutzer können in die erweiterte Verwendung aufgenommen werden. 4. Häufige Fehler sind Signaturüberprüfungsfehler, Token -Ablauf und übergroße Nutzlast. Zu Debugging -Fähigkeiten gehört die Verwendung von Debugging -Tools und Protokollierung. 5. Leistungsoptimierung und Best Practices umfassen die Verwendung geeigneter Signaturalgorithmen, das Einstellen von Gültigkeitsperioden angemessen.
Wie analysiert und verarbeitet man HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet
PHP -Programm zum Zählen von Vokalen in einer Zeichenfolge
Feb 07, 2025 pm 12:12 PM
Eine Zeichenfolge ist eine Folge von Zeichen, einschließlich Buchstaben, Zahlen und Symbolen. In diesem Tutorial wird lernen, wie Sie die Anzahl der Vokale in einer bestimmten Zeichenfolge in PHP unter Verwendung verschiedener Methoden berechnen. Die Vokale auf Englisch sind a, e, i, o, u und sie können Großbuchstaben oder Kleinbuchstaben sein. Was ist ein Vokal? Vokale sind alphabetische Zeichen, die eine spezifische Aussprache darstellen. Es gibt fünf Vokale in Englisch, einschließlich Großbuchstaben und Kleinbuchstaben: a, e, ich, o, u Beispiel 1 Eingabe: String = "TutorialPoint" Ausgabe: 6 erklären Die Vokale in der String "TutorialPoint" sind u, o, i, a, o, ich. Insgesamt gibt es 6 Yuan
Erklären Sie die späte statische Bindung in PHP (statisch: :).
Apr 03, 2025 am 12:04 AM
Statische Bindung (statisch: :) implementiert die späte statische Bindung (LSB) in PHP, sodass das Aufrufen von Klassen in statischen Kontexten anstatt Klassen zu definieren. 1) Der Analyseprozess wird zur Laufzeit durchgeführt.
Was sind PHP Magic -Methoden (__construct, __Destruct, __call, __get, __set usw.) und geben Sie Anwendungsfälle an?
Apr 03, 2025 am 12:03 AM
Was sind die magischen Methoden von PHP? Zu den magischen Methoden von PHP gehören: 1. \ _ \ _ Konstrukt, verwendet, um Objekte zu initialisieren; 2. \ _ \ _ Destruct, verwendet zur Reinigung von Ressourcen; 3. \ _ \ _ Call, behandeln Sie nicht existierende Methodenaufrufe; 4. \ _ \ _ GET, Implementieren Sie den dynamischen Attributzugriff; 5. \ _ \ _ Setzen Sie dynamische Attributeinstellungen. Diese Methoden werden in bestimmten Situationen automatisch aufgerufen, wodurch die Code -Flexibilität und -Effizienz verbessert werden.
