React如何從後端擷取資料並渲染到前端？

初學react，理解不對請指出：D

我們知道，傳統的後端開發，是在頁面結構中嵌入資料，在伺服器中解析出來，例如：

//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: "" }), 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

