介紹

開(kāi)發(fā)動(dòng)態(tài)和互動(dòng)式 Web 應(yīng)用程式在動(dòng)態(tài)和不斷變化的 Web 開(kāi)發(fā)世界中至關(guān)重要。 React 是一個(gè)用於創(chuàng)建使用者介面的 JavaScript 工具包，其速度和多功能性使其廣受歡迎。然而，PHP 仍然是伺服器端程式設(shè)計(jì)的強(qiáng)大選擇。本教學(xué)將向您展示如何輕鬆組合 PHP 後端和 React 前端的功能，以充分利用各自的優(yōu)勢(shì)。

了解 PHP 和 React 的不同角色

什麼是 PHP

術(shù)語(yǔ) PHP 是超文本預(yù)處理器的縮寫。它是一種用於 Web 開(kāi)發(fā)的伺服器端腳本語(yǔ)言。它可以輕鬆地嵌入 HTML 文件。 HTML 程式碼也可以寫入 PHP 檔案。

PHP 的優(yōu)點(diǎn)

以下是 PHP 的一些優(yōu)點(diǎn)
易於學(xué)習(xí)和使用：

• PHP 以其簡(jiǎn)單的語(yǔ)法而聞名，對(duì)於初學(xué)者來(lái)說(shuō)相對(duì)容易。這種簡(jiǎn)單性有助於新開(kāi)發(fā)人員快速開(kāi)始建立 Web 應(yīng)用程式。

廣泛採(cǎi)用與社群支持：

• PHP 擁有一個(gè)龐大且活躍的社區(qū)。這意味著大量的文件、大量的教學(xué)課程和豐富的線上資源。社群支援也轉(zhuǎn)化為大量預(yù)先編寫的程式碼、框架和外掛程式庫(kù)。

整合能力：

• PHP 與各種資料庫(kù)（例如 MySQL、PostgreSQL、SQLite）、Web 伺服器（例如 Apache 和 Nginx）以及其他服務(wù)無(wú)縫整合。這使其成為 Web 開(kāi)發(fā)的多功能選擇。

開(kāi)源：

• PHP 可以免費(fèi)使用和分發(fā)。這降低了開(kāi)發(fā)成本，特別是對(duì)於小型企業(yè)和新創(chuàng)公司而言。

跨平臺(tái)相容性：

• PHP 可以在多個(gè)平臺(tái)上運(yùn)行，包括 Windows、Linux 和 macOS。這種靈活性確保 PHP 應(yīng)用程式可以部署在不同的環(huán)境中，而不會(huì)出現(xiàn)相容性問(wèn)題。

PHP 的缺點(diǎn)

以下是 PHP 的一些缺點(diǎn)。

1. 函數(shù)命名與參數(shù)順序不一致:

   • PHP 常見(jiàn)的批評(píng)之一是其不一致的函數(shù)命名約定和參數(shù)順序。例如，函數(shù)可能有不同的命名模式（str_replace 與 strpos）和參數(shù)順序（array_filter($array, $callback) 與 array_map($callback, $array)）。這種不一致可能會(huì)導(dǎo)致混亂和錯(cuò)誤，尤其是對(duì)於新開(kāi)發(fā)人員而言。

2. 歷史安全問(wèn)題：

   • PHP 一直存在安全漏洞，部分原因是其廣泛使用，部分原因是其設(shè)計(jì)方式。雖然現(xiàn)代 PHP 在安全功能方面有了顯著改進(jìn)，但早期版本的遺留程式碼庫(kù)和不良做法仍然可能帶來(lái)安全風(fēng)險(xiǎn)。

3. 與其他語(yǔ)言相比的表現(xiàn)：

   • 雖然 PHP 在提高效能方面取得了巨大進(jìn)步（尤其是 PHP 7 及更高版本），但對(duì)於某些任務(wù)來(lái)說(shuō)，與 Node.js 或 Go 等其他語(yǔ)言相比，它仍然會(huì)慢一些。對(duì)於需要極高效能和低延遲的應(yīng)用程式來(lái)說(shuō)，這可能是一個(gè)缺點(diǎn)。

4. 弱型別:

   • PHP 的弱型別系統(tǒng)允許隱式型別轉(zhuǎn)換，可能會(huì)導(dǎo)致難以追蹤的意外行為和錯(cuò)誤。例如，將字串與數(shù)字進(jìn)行比較可能會(huì)產(chǎn)生意外結(jié)果（“123”== 123 為 true，但“123”=== 123 為 false）。這可能會(huì)產(chǎn)生問(wèn)題，特別是對(duì)於大型、複雜的程式碼庫(kù)。

5. 過(guò)度依賴舊的程式碼：

   • 許多 PHP 應(yīng)用程式和教程仍然使用舊的過(guò)程式程式設(shè)計(jì)技術(shù)，而不是現(xiàn)代的物件導(dǎo)向或函數(shù)式程式設(shè)計(jì)實(shí)踐。這可能會(huì)導(dǎo)致程式碼的可維護(hù)性較差且難以閱讀。雖然現(xiàn)代框架鼓勵(lì)更好的實(shí)踐，但過(guò)程程式碼的遺留問(wèn)題仍然是一個(gè)重大問(wèn)題。

什麼是反應(yīng)

React JS 是一個(gè)聲明式、高效且靈活的 JavaScript 程式庫(kù)，用於建立使用者介面。它是 MVC 中的“V”。 ReactJS是一個(gè)開(kāi)源的、基於元件的前端函式庫(kù)，只負(fù)責(zé)應(yīng)用程式的視圖層。它由 Facebook 維護(hù)。

React Js 的優(yōu)點(diǎn)

以下是 React Js 的一些優(yōu)點(diǎn)。

1. 基於組件的架構(gòu):

   • React 遵循基於元件的架構(gòu)，允許開(kāi)發(fā)人員建立可重複使用的 UI 元件。這種模組化可以帶來(lái)更清晰、更易於維護(hù)和擴(kuò)展的程式碼。元件可以在應(yīng)用程式的不同部分重複使用，減少冗餘並提高開(kāi)發(fā)效率。

2. 提高效能的虛擬 DOM:

   • React 使用虛擬 DOM（文件物件模型）來(lái)最佳化渲染效能。當(dāng)應(yīng)用程式的狀態(tài)變更時(shí)，React 首先更新虛擬 DOM，然後僅在必要時(shí)有效更新實(shí)際 DOM。這最大限度地減少了對(duì) DOM 的直接操作，從而實(shí)現(xiàn)更快、更有效率的更新，對(duì)於 UI 頻繁更改的複雜應(yīng)用程式尤其有利。

3. 聲明式 UI:

   • React 建立 UI 的聲明式方法使程式碼更可預(yù)測(cè)且更易於偵錯(cuò)。開(kāi)發(fā)人員描述給定狀態(tài)下的 UI 應(yīng)該是什麼樣子，React 負(fù)責(zé)根據(jù)狀態(tài)變化更新實(shí)際的 UI。這簡(jiǎn)化了開(kāi)發(fā)互動(dòng)式使用者介面的過(guò)程並使程式碼更具可讀性。

4. 豐富的生態(tài)系與社區(qū)支持:

   • React 擁有龐大的生態(tài)系統(tǒng)，其中包含大量增強(qiáng)其功能的函式庫(kù)、工具和擴(kuò)充。強(qiáng)大的社群支援確保開(kāi)發(fā)人員能夠存取廣泛的資源、教學(xué)課程和第三方元件。此外，F(xiàn)acebook 的支援和全球大量開(kāi)發(fā)者的貢獻(xiàn)確保 React 保持最新?tīng)顟B(tài)並不斷改進(jìn)。

5. 對(duì) JSX 的大力支持：

   • React 使用 JSX (JavaScript XML)，這是一種允許在 JavaScript 中編寫 HTML 的語(yǔ)法擴(kuò)充。 JSX 簡(jiǎn)化了建立 React 元件的過(guò)程，並透過(guò)在視覺(jué)上將結(jié)構(gòu) (HTML) 與邏輯 (JavaScript) 分離，使程式碼更具可讀性。標(biāo)記與邏輯的緊密整合提高了開(kāi)發(fā)效率並減少了開(kāi)發(fā)人員的上下文切換。

React Js 的缺點(diǎn)

以下是 React Js 的一些缺點(diǎn)。

1. 陡峭的學(xué)習(xí)曲線：

   • React 的靈活性及其生態(tài)系統(tǒng)中廣泛的工具和庫(kù)可以使初學(xué)者的學(xué)習(xí)曲線陡峭。對(duì)於新開(kāi)發(fā)人員來(lái)說(shuō)，理解 JSX、元件、狀態(tài)管理和複雜的虛擬 DOM 等概念可能具有挑戰(zhàn)性。

2. 樣板檔案與複雜性：

   • 設(shè)定 React 專案通常涉及大量的樣板程式碼和配置。像 Create React App 這樣的工具簡(jiǎn)化了初始設(shè)置，但隨著專案的成長(zhǎng)，複雜性會(huì)增加??，需要額外的配置和對(duì) Webpack 和 Babel 等建置工具的理解。

3. 快速變化的環(huán)境：

   • React 生態(tài)系統(tǒng)發(fā)展迅速，更新頻繁，新工具不斷湧現(xiàn)。對(duì)於開(kāi)發(fā)人員來(lái)說(shuō)，跟上最新的最佳實(shí)踐、更新和程式庫(kù)可能會(huì)讓人不知所措。這種快速的變更也可能導(dǎo)致過(guò)時(shí)的文件以及不同程式庫(kù)和版本之間的相容性問(wèn)題。

4. 糟糕的搜尋引擎最佳化：

   • 預(yù)設(shè)情況下，React 在客戶端渲染應(yīng)用程序，這可能會(huì)導(dǎo)致 SEO 效能不佳，因?yàn)樗褜ひ媾老x可能難以對(duì)動(dòng)態(tài)內(nèi)容建立索引。儘管存在使用 Next.js 等框架的伺服器端渲染 (SSR) 等解決方案，但實(shí)作它們會(huì)增加專案的複雜性。

5. 狀態(tài)管理複雜度:

   • 管理大型 React 應(yīng)用程式中的狀態(tài)可能會(huì)變得複雜。雖然 React 的內(nèi)建狀態(tài)管理非常適合小型應(yīng)用程序，但擴(kuò)充功能需要更複雜的狀態(tài)管理解決方案，例如 Redux、MobX 或 Context API。這些解決方案增加了另一層複雜性，需要額外的學(xué)習(xí)和設(shè)定。

PHP 和 React 在現(xiàn)代 Web 應(yīng)用程式中的協(xié)同作用

現(xiàn)代 Web 應(yīng)用程式中 PHP 和 React 之間的協(xié)同作用利用這兩種技術(shù)的優(yōu)勢(shì)來(lái)創(chuàng)建健全、動(dòng)態(tài)和可擴(kuò)展的應(yīng)用程式。以下是這些技術(shù)如何相互補(bǔ)充以及組合它們的好處的深入研究：

將 PHP 與 React 結(jié)合使用的 5 個(gè)好處

注意：好處不只五項(xiàng)，這裡列了幾個(gè)！

1. 全端多功能性

前端與後端整合：

• 無(wú)縫資料處理： React 有效管理前端，而 PHP 可以處理伺服器端邏輯和資料交換，從而形成連貫的開(kāi)發(fā)環(huán)境。

• API 驅(qū)動(dòng)開(kāi)發(fā)： 透過(guò) GraphQL 或 RESTful 端點(diǎn)向 React 前端提供數(shù)據(jù)，PHP 可以充當(dāng)強(qiáng)大的後端 API，從而實(shí)現(xiàn)明確的職責(zé)劃分。

開(kāi)發(fā)效率：

• 並行開(kāi)發(fā)：同時(shí)處理前端和後端專案的團(tuán)隊(duì)可以加快開(kāi)發(fā)速度並消除瓶頸。

• 重複使用元件：由於 React 基於元件的設(shè)計(jì)，前端開(kāi)發(fā)更加模組化和可管理，這保證了 UI 元素的重複使用。

2. 可擴(kuò)展性

管理更高的負(fù)載：

• 有效的後端：Laravel 等 PHP 框架旨在有效管理大量資料和使用者請(qǐng)求，處理複雜且可擴(kuò)展的後端流程。

• 前端最佳化：即使對(duì)於複雜且資料密集的應(yīng)用程序，React 的虛擬 DOM 和有效的比較技術(shù)也能保證快速回應(yīng)的 UI 變更。

微服務(wù)架構(gòu)：

• 模組化方法：當(dāng) PHP 包含在微服務(wù)架構(gòu)中時(shí)，不同的服務(wù)可以獨(dú)立擴(kuò)充。 React 透過(guò)允許其根據(jù)需要使用這些服務(wù)來(lái)促進(jìn)可擴(kuò)展性。

• 負(fù)擔(dān)分配：透過(guò)在處理伺服器端操作的 PHP 和處理客戶端互動(dòng)的 React 之間劃分負(fù)擔(dān)，整個(gè)程式可以巧妙地管理更多流量。

3. 性能

快速載入時(shí)間：

• 伺服器端渲染（SSR）：初始 HTML 可能由 PHP 預(yù)先渲染並傳送到客戶端，之後 React 可以對(duì)其進(jìn)行水合。此方法可提升使用者體驗(yàn)並加快初始載入時(shí)間。

• 非同步資料取得：透過(guò)使用 React，可以從 PHP 後端非同步取得數(shù)據(jù)，保持響應(yīng)式使用者介面並有效處理資料變更。

增強(qiáng)溝通：

• 有效的狀態(tài)管理： React 的狀態(tài)管理功能（例如上下文和鉤子）可以更好地處理 UI 狀態(tài)更改，從而最大限度地減少無(wú)意義的重新渲染的需要。

• 快取和最佳化： PHP 可以使用伺服器端快取技術(shù)來(lái)加速靜態(tài)材料的服務(wù)並降低資料庫(kù)需求，從而提高效能。

4.豐富的使用者介面

互動(dòng)式和動(dòng)態(tài)的使用者介面：

• 基於元件的設(shè)計(jì)：React 的基於元件的設(shè)計(jì)使程式設(shè)計(jì)師能夠創(chuàng)建易於更新和擴(kuò)展的複雜的互動(dòng)式使用者介面。

• 即時(shí)更新：React 能夠有效率地處理動(dòng)態(tài)內(nèi)容變化和即時(shí)更新，帶來(lái)流暢有趣的使用者體驗(yàn)。

改進(jìn)的使用者體驗(yàn)：

• 當(dāng)代 UI 庫(kù)：React 與當(dāng)代 UI 庫(kù)和框架（例如 Material-UI 和 Ant Design）很好地配合，使程式設(shè)計(jì)師能夠設(shè)計(jì)美觀且直觀的用戶介面。

• 使用 React 可以輕鬆建立可在各種裝置和螢?zāi)怀叽缟嫌行н\(yùn)作的響應(yīng)式和適應(yīng)性強(qiáng)的使用者介面 (UI)。

5. SEO友好

更好的搜尋引擎最佳化：

• 伺服器端渲染 (SSR)： 在將 HTML 內(nèi)容提供給客戶端之前使用 PHP 預(yù)先渲染 HTML 內(nèi)容，可以保證更好的搜尋引擎索引和 SEO。

• 元標(biāo)籤和動(dòng)態(tài)資料：使用 PHP 後端的信息，React 可以動(dòng)態(tài)管理和更新元標(biāo)籤、標(biāo)題和其他 SEO 相關(guān)資料。

更好的爬行性：

• 靜態(tài)網(wǎng)站產(chǎn)生（SSG）：React 可以在建置時(shí)產(chǎn)生靜態(tài)頁(yè)面，透過(guò)利用Next.js 等支援兩者的解決方案，改進(jìn)應(yīng)用程式的SEO，同時(shí)保留PHP來(lái)處理動(dòng)態(tài)內(nèi)容SSR 和SSG。

• URL 結(jié)構(gòu)： React 可以處理路由和導(dǎo)航，確保訪客和搜尋引擎可以輕鬆瀏覽網(wǎng)站，而 PHP 可以管理清晰、SEO 友善的 URL 結(jié)構(gòu)。

透過(guò)將 PHP 與 React 集成，開(kāi)發(fā)人員可以建立健壯、可擴(kuò)展且性能優(yōu)化的線上應(yīng)用程序，並具有豐富的用戶體驗(yàn)和搜尋引擎優(yōu)化功能。由於它們的協(xié)同作用，前端和後端技術(shù)可以結(jié)合起來(lái)創(chuàng)建一個(gè)強(qiáng)大且適應(yīng)性強(qiáng)的開(kāi)發(fā)流程。

---

建立 PHP 與 React 開(kāi)發(fā)環(huán)境

此時(shí)，我們即將開(kāi)始一個(gè)使用 React.js 和 PHP 作為前端的實(shí)際專案。

先決條件

作為開(kāi)發(fā)人員，您需要了解一些事情，或者您需要能夠使 php 作為 React 後端工作。這是必備清單！

• 有 PHP 基礎(chǔ)
• 了解你的 React.Js
• 確保您的電腦上安裝了帶有 npm 的 Node.js。
• 系統(tǒng)中已安裝 PHP Apache 或 Nginx

如何使用 PHP 作為後端、使用 React 作為前端的逐步過(guò)程

使用 PHP 作為後端和 React 的步驟非常簡(jiǎn)單，如下所示。

建構(gòu)前端

第 1 步： 開(kāi)啟終端機(jī)並執(zhí)行以下命令：

npx create-react-app my-react-app

注意：在執(zhí)行此命令之前，您必須 cd 進(jìn)入您想要的 React 資料夾所在的目錄！ cd 到所需目錄的方法是將此命令新增至終端

cd Documents

之後，您將等待 React 應(yīng)用程式被建立。

第 2 步：導(dǎo)航到您的專案資料夾：
需要在終端機(jī)中存取剛剛建立的項(xiàng)目

cd my-react-app

第3步：?jiǎn)?dòng)開(kāi)發(fā)伺服器：

npm start

建構(gòu) PHP 後端
現(xiàn)在您的 React 應(yīng)用程式已經(jīng)可以運(yùn)行了，是時(shí)候建立 PHP 後端了：

第 1 步： 在 React 應(yīng)用程式目錄中為 PHP 檔案建立一個(gè)新資料夾。
為此，請(qǐng)?jiān)诮K端機(jī)上執(zhí)行以下命令

mkdir php_backend

透過(guò)執(zhí)行此指令，您將看到一個(gè)名為 php_backend 的資料夾

第 2 步： 在 php-backend 資料夾中，建立一個(gè)名為 index.php 的檔案。
注意：你可以隨意稱呼它任何名稱，在我的例子中，我決定使用index.php。

第 3 步： 在 index.php 中，您可以開(kāi)始定義 PHP 端點(diǎn)和邏輯。
以下是我的 php-backend/index.php 中所寫的內(nèi)容，如果您是 PHP 開(kāi)發(fā)人員，您會(huì)熟悉此語(yǔ)法。

<?PHP 
$serverName="localhost";
$userName="root";
$password="";
$databaseName="react_php";
$conn = mysqli_connect($serverName, $userName, $password, $databaseName);

$recText = $_POST['text'];

$query = ("INSERT INTO react_php (texts) VALUES('$recText')");

if (mysqli_query($conn, $query)) {
  echo "Data has been inserted successfully";
}else {
  echo "Error";
}
?>

現(xiàn)在要做的下一步是轉(zhuǎn)到您之前創(chuàng)建的React 程式碼，然後在程式碼編輯器中打開(kāi)該資料夾，您將看到一個(gè)像src/App.js 這樣的資料夾，並在下面添加此語(yǔ)法。

import React, { Component } from 'react';
 // import logo from './logo.svg';
import axios from 'axios'; //Import Axios
import './App.css';

class App extends Component{
state = {
  text : ""
}
handleAdd = async e =>{
 await this.setState({
   text : e.target.value
 }) 
}
handleSubmit = e =>{
 e.preventDefault();
 console.log(this.state.text);
 let formData = new FormData();
 formData.append("text", this.state.text);
 const url = "http://localhost:80/react-backend/"
 axios.post(url,formData)
 .then(res=> console.log(res.data))
 .catch(err=> console.log(err))
}
render(){
  return(
    <div className="App-header">
     <input 
       onChange={this.handleAdd}
       className="form-control" 
       // value={this.state.text}
       type="text" 
       id='text' 
       placeholder='Enter Some Text!'/> 
       <br/>
       <button 
        onClick={this.handleSubmit}
        className="btn btn-success" 
        id='submit'>  Save</button>
    </div>
  );
}

}

匯出預(yù)設(shè)應(yīng)用程式；

注意：讓PHP工作的是**Axios**?？纯聪旅娴某淌酱a片段，你就會(huì)明白我們是如何使用它的！

在專案的 public 資料夾中，您將在該文件中看到一個(gè) index.html 文件，我新增了一個(gè) bootstrap cdn 作為我正在使用的框架，

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> 

這裡有一些樣式。

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
   animation: App-logo-spin infinite 20s linear;
  }
}

 .App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }

 .App-link {
   color: #61dafb;
 }

 @keyframes App-logo-spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

嘗試完所有這些之後，這就是它會(huì)給你的視圖。

她是控制後端的資料庫(kù)。填寫文字並點(diǎn)擊“儲(chǔ)存”後，文字將自動(dòng)顯示在資料庫(kù)中。

此後我寫了**Freddie**，然後點(diǎn)擊了下面顯示的圖像右上角的瀏覽，。一旦你看到這個(gè)，就知道你做了正確的事。

這是我在單一應(yīng)用程式中的 React 和 PHP 中使用的步驟。

結(jié)論

總之，將 PHP 作為後端與 React 作為前端集成，為現(xiàn)代 Web 應(yīng)用程式開(kāi)發(fā)提供了強(qiáng)大且多功能的解決方案。如所討論的，這種組合利用了 PHP 的伺服器端功能和 React 的動(dòng)態(tài)、基於元件的架構(gòu)的優(yōu)勢(shì)來(lái)創(chuàng)建可擴(kuò)展的高效能應(yīng)用程式。 PHP 有效處理伺服器端邏輯、資料庫(kù)互動(dòng)和 API 創(chuàng)建，而 React 確保豐富、回應(yīng)靈敏的使用者介面和無(wú)縫資料處理。

PHP 和 React 之間的這種協(xié)同作用不僅增強(qiáng)了開(kāi)發(fā)過(guò)程，而且還導(dǎo)致 Web 應(yīng)用程式具有互動(dòng)性、吸引力和 SEO 友善性。採(cǎi)用這種強(qiáng)大的整合使開(kāi)發(fā)人員能夠輕鬆且有效率地建立全面且以使用者為中心的 Web 應(yīng)用程式。

我希望您發(fā)現(xiàn)本教學(xué)非常有價(jià)值！下次再見(jiàn)。

關(guān)於作者

全端 Laravel 開(kāi)發(fā)人員 Emmanuel Okolie 擁有 4 年以上的軟體開(kāi)發(fā)經(jīng)驗(yàn)。他透過(guò)將軟體開(kāi)發(fā)、寫作和指導(dǎo)他人的工作結(jié)合，培養(yǎng)了成熟的技能。

他的堆疊包括 ReactJ、Laravel、PHP、JavaScript 以及其他語(yǔ)言和框架。
作為一名自由工作者，他為客戶創(chuàng)建網(wǎng)站並編寫技術(shù)指南，向人們展示如何做他所做的事情。

如果有機(jī)會(huì)，Emmanuel Okolie很樂(lè)意與您交談。請(qǐng)?jiān)煸L並追蹤他的網(wǎng)站、Facebook、Github、LinkedIn和Twitter。

以上是如何使用 PHP 作為後端 使用 React 作為前端的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！