透過java鏡頭看react

在我們的編碼訓練營中，當我們快速跑完 React 並在實驗室中大汗淋漓時，我們的講師會說：“如果你仔細觀察，React 很像 Java。”

起初，這只是一個朗朗上口且有趣的短語。 ？然而，最近，我在從事個人 Google 地圖計算器專案時重新審視了 React。深入研究幾天后，我開始發現其中一些相似之處。

讓我們深入研究這些聯繫，看看 Java 的基本概念如何闡明我們對 React 的理解。 ？

目錄

1. App.jsx 作為 Java 主類別 (psvm)

2. 使用 Hooks 作為 Java Getter 和 Setter 進行狀態管理

3. 作為 Java 類別的容器

4. 元件作為 Java 方法

5. React 在元件中的回傳

6. Props 作為 Java 方法參數

7. 作為傳回值的 Java 方法的回呼函數

---

1. App.jsx作為Java主類別（psvm）

Java：

在Java中，主類別作為程式的入口點，它啟動程式的執行。

例如，您可以實例化不同類別的物件並呼叫它們各自的方法：

反應：

類似地，在 React 應用程式中，App.jsx 檔案透過編排主應用程式流程來發揮類似的作用。

就像Java中的main方法可以呼叫多個函數一樣，App.jsx負責根據應用程式的路由和目前狀態渲染所有元件。

在上面來自 App.jsx 的 React 範例中，return 語句中渲染的元件反映了 Java 中呼叫方法或初始化物件的過程。

在這種情況下，容器>和>頁面根據網頁 URL 路徑呈現。

---

2. 使用 Hooks 作為 Java Getters 和 Setters 進行狀態管理

Java：
在 Java 中，您可以使用變數和公用 getter/setter 方法來管理屬性，以取得和設定屬性的屬性，例如使用者的使用者名稱。

反應：

React 的 useState 掛鉤處理應用程式狀態的方式類似於 Java 使用 getter 和 setter 方法來管理物件屬性。

React 中的 useState 鉤子可讓您宣告可以隨時間變化的狀態變量，就像 Java 中類別中的實例變數一樣。

在上面的例子中：

• setUserName 用作 setter 方法，允許更新使用者名稱。雖然 useState("") 意味著使用者名稱被初始化為空字串，但 setUserName 會更新該值。

下面我們有一個函數handleInputChange，它檢測網頁表單中的變更以更新使用者資訊並將使用者名稱的值更新為使用者輸入的內容。

• 您可以將存取使用者名稱視為 getter。

每當您在元件中引用使用者名稱時，您實際上都是在使用 getter 來存取其值。例如，我的網頁可以透過以下方式呈現使用者名稱：

---

3. 容器作為 Java 類

Java：
在 Java 中，類別將相關的任務和資料組合在一起。它們幫助管理資訊在應用程式中的流動方式。

在此範例中，Calculator 類別處理計算並儲存結果。

反應：

同樣，在 React 中，容器透過將應用程式的資料連接到元件而發揮關鍵作用。它們處理從 API 呼叫獲取資料和管理應用程式狀態等事務。

在此範例中，計算器容器管理輸入值和結果的狀態，

---

4. 元件作為 Java 方法

Java：

Java 中的方法執行特定操作，例如處理使用者輸入。可以根據需要呼叫這些方法，以促進應用程式中的各種功能。

反應：

就像 Java 方法是小而集中的任務一樣，React 元件也有類似的用途，充當使用者介面的基本構建塊。

每個元件都是針對特定功能而設計的，並且可以在整個應用程式中重複使用。

下面的 ManualFilter 元件僅專注於使用者的過濾選項。它提供了允許使用者選擇特定類別的複選框。

然後可以在 UserForm 容器頁面中呼叫該元件。

---

5. React 在元件中的回歸

Java：

在 Java 中，方法可能會傳回一個值，程式的另一部分將使用該值來產生輸出。

例如，renderOutput 方法傳回一個包含使用者目標的字串，然後可以將其顯示在程式中的其他位置。

反應：

React 元件中的 return 語句對於渲染使用者介面至關重要。在 React 中，從元件傳回的內容決定了使用者在螢幕上看到的內容。

這與前面提到的類似，Java 中的方法傳回用於在程式的另一部分中處理或顯示的資料。

在此範例中，UserGoal 元件傳回顯示使用者目標的段落元素。

---

6. Props 作為 Java 方法參數

Java：

您可以將參數傳遞給 Java 方法，其中參數可以影響呼叫物件的狀態或行為。

例如，考慮一個將訊息作為參數的簡單 Java 方法。它收到的訊息將影響控制台顯示的內容。

反應：

在React中，元件可以接收props，類似Java方法中的參數。 React 元件使用 props 來決定其內容和功能。

屬性控制元件的行為方式以及它們顯示的資料。

假設我們有一個名為 WelcomePage 的父元件，它將向 MessageDisplay 子元件傳遞訊息。

換句話說，將 MessageDisplay 想像為 WelcomePage 登陸頁面上顯示訊息的部分。

我們可以在父元件中定義一則訊息並將其作為 prop 傳遞給 MessageDisplay 元件：

MessageDisplay 元件將接收此道具並渲染它：

---

7. 回呼函數作為傳回值的 Java 方法

Java：

在 Java 中，類別中通常有方法來執行特定操作並將值傳回給呼叫者。例如，您可能有一個名為 Calculator 的類，其中包含計算兩個數字之間差異的方法：

^在另一個類別中，您建立 Calculator 類別的實例並呼叫該方法。

反應：

React 遵循類似的概念，但它關注的是元件之間的關係。

當您的父元件包含子元件時，回呼函數有助於促進它們之間的通訊。 （請記住：父級是容納其他元件的主容器 - 類似於我們之前的父級「登陸頁面」範例以及訊息框的子元件）

例如，假設您有一個 ChildComponent，需要將一些計算資料傳回其父元件。

下面我們將handleCalculationResult函數作為prop從父級傳遞給子級。

此函數的作用類似回呼：

您可以在下面看到 onCalculate 是如何在 ChildComponent 中從父元件接收到的回調函數。

當點擊ChildComponent中的按鈕時，它會執行計算並使用onCalculate將結果傳回父級。這模仿了 Java 方法如何將值傳回給呼叫者。

透過這種方式，父級管理整個應用程式狀態和行為，而子級則專注於特定操作（在本例中為計算）。

以上是透過java鏡頭看react的詳細內容。更多資訊請關注PHP中文網其他相關文章！