React如何从后端获取数据并渲染到前端？-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

React如何从后端获取数据并渲染到前端？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 06, 2016 pm 08:18 PM

phpreact.jsフロントエンド後部

初学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，返回给浏览器。

想到的办法是：

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

アクション中のPHP：実際の例とアプリケーションApr 14, 2025 am 12:19 AM

PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1）eコマース：ショッピングカート機能と支払い処理に使用。 2）コンテンツ管理システム：動的コンテンツの生成とユーザー管理に使用されます。 3）API開発：RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。

PHP：インタラクティブなWebコンテンツを簡単に作成しますApr 14, 2025 am 12:15 AM

PHPにより、インタラクティブなWebコンテンツを簡単に作成できます。 1）HTMLを埋め込んでコンテンツを動的に生成し、ユーザー入力またはデータベースデータに基づいてリアルタイムで表示します。 2）プロセスフォームの提出と動的出力を生成して、XSSを防ぐためにHTMLSPECIALCHARSを使用していることを確認します。 3）MySQLを使用してユーザー登録システムを作成し、Password_HashおよびPreprocessingステートメントを使用してセキュリティを強化します。これらの手法を習得すると、Web開発の効率が向上します。

PHPとPython：2つの一般的なプログラミング言語を比較しますApr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHPは依然として動的であり、現代のプログラミングの分野で重要な位置を占めています。 1）PHPのシンプルさと強力なコミュニティサポートにより、Web開発で広く使用されています。 2）その柔軟性と安定性により、Webフォーム、データベース操作、ファイル処理の処理において顕著になります。 3）PHPは、初心者や経験豊富な開発者に適した、常に進化し、最適化しています。

PHPの現在のステータス：Web開発動向を見てくださいApr 13, 2025 am 12:20 AM

PHPは、現代のWeb開発、特にコンテンツ管理とeコマースプラットフォームで依然として重要です。 1）PHPには、LaravelやSymfonyなどの豊富なエコシステムと強力なフレームワークサポートがあります。 2）パフォーマンスの最適化は、Opcacheとnginxを通じて達成できます。 3）PHP8.0は、パフォーマンスを改善するためにJITコンパイラを導入します。 4）クラウドネイティブアプリケーションは、DockerおよびKubernetesを介して展開され、柔軟性とスケーラビリティを向上させます。

PHP対その他の言語：比較Apr 13, 2025 am 12:19 AM

PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。

PHP対Python：コア機能と機能Apr 13, 2025 am 12:16 AM

PHPとPythonにはそれぞれ独自の利点があり、さまざまなシナリオに適しています。 1.PHPはWeb開発に適しており、組み込みのWebサーバーとRich Functionライブラリを提供します。 2。Pythonは、簡潔な構文と強力な標準ライブラリを備えたデータサイエンスと機械学習に適しています。選択するときは、プロジェクトの要件に基づいて決定する必要があります。

PHP：Web開発の重要な言語Apr 13, 2025 am 12:08 AM

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting（）やvar_dump（）などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7

See all articles