通过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中，主类作为程序的入口点，它启动程序的执行。

例如，您可以实例化不同类的对象并调用它们各自的方法：

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

反应：

类似地，在 React 应用程序中，App.jsx 文件通过编排主应用程序流程来发挥类似的作用。

就像Java中的main方法可以调用多个函数一样，App.jsx负责根据应用程序的路由和当前状态渲染所有组件。

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

在上面来自 App.jsx 的 React 示例中，return 语句中渲染的组件反映了 Java 中调用方法或初始化对象的过程。

在这种情况下，容器>和>页面根据网页 URL 路径呈现。

---

2. 使用 Hooks 作为 Java Getters 和 Setters 进行状态管理

Java：
在 Java 中，您可以使用变量和公共 getter/setter 方法来管理属性，以获取和设置属性的属性，例如用户的用户名。

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

反应：

React 的 useState 挂钩处理应用程序状态的方式类似于 Java 使用 getter 和 setter 方法来管理对象属性。

React 中的 useState 钩子允许您声明可以随时间变化的状态变量，就像 Java 中类中的实例变量一样。

const [username, setUsername] = useState("");

在上面的例子中：

• setUserName 用作 setter 方法，允许更新用户名。虽然 useState("") 意味着用户名被初始化为空字符串，但 setUserName 会更新该值。

下面我们有一个函数handleInputChange，它检测网络表单中的更改以更新用户信息并将用户名的值更新为用户输入的内容。

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

• 您可以将访问用户名视为 getter。

每当您在组件中引用用户名时，您实际上都是在使用 getter 来访问其值。例如，我的网页可以通过以下方式呈现用户名：

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

---

3. 容器作为 Java 类

Java：
在 Java 中，类将相关的任务和数据组合在一起。它们帮助管理信息在应用程序中的流动方式。

在此示例中，Calculator 类处理计算并存储结果。

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

反应：

同样，在 React 中，容器通过将应用程序的数据连接到组件而发挥着关键作用。它们处理从 API 调用获取数据和管理应用程序状态等事务。

在此示例中，计算器容器管理输入值和结果的状态，

const [username, setUsername] = useState("");

---

4. 组件作为 Java 方法

Java：

Java 中的方法执行特定操作，例如处理用户输入。可以根据需要调用这些方法，以促进应用程序中的各种功能。

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

反应：

就像 Java 方法是小而集中的任务一样，React 组件也有类似的用途，充当用户界面的基本构建块。

每个组件都是针对特定功能而设计的，并且可以在整个应用程序中重复使用。

下面的 ManualFilter 组件仅专注于用户的过滤选项。它提供了允许用户选择特定类别的复选框。

然后可以在 UserForm 容器页面中调用该组件。

  <p>Welcome to our page {username}</p>

---

5. React 在组件中的回归

Java：

在 Java 中，方法可能会返回一个值，程序的另一部分将使用该值来生成输出。

例如，renderOutput 方法返回一个包含用户目标的字符串，然后可以将其显示在程序中的其他位置。

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

反应：

React 组件中的 return 语句对于渲染用户界面至关重要。在 React 中，从组件返回的内容决定了用户在屏幕上看到的内容。

这与前面提到的类似，Java 中的方法返回用于在程序的另一部分中处理或显示的数据。

在此示例中，UserGoal 组件返回显示用户目标的段落元素。

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

---

6. Props 作为 Java 方法参数

Java：

您可以将参数传递给 Java 方法，其中参数可以影响调用对象的状态或行为。

例如，考虑一个将消息作为参数的简单 Java 方法。它收到的消息将影响控制台显示的内容。

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

反应：

在React中，组件可以接收props，类似于Java方法中的参数。 React 组件使用 props 来确定其内容和功能。

属性控制组件的行为方式以及它们显示的数据。

假设我们有一个名为 WelcomePage 的父组件，它将向 MessageDisplay 子组件传递消息。

换句话说，将 MessageDisplay 想象为 WelcomePage 登陆页面上显示消息的部分。

我们可以在父组件中定义一条消息并将其作为 prop 传递给 MessageDisplay 组件：

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

MessageDisplay 组件将接收此道具并渲染它：

const [username, setUsername] = useState("");

---

7. 回调函数作为返回值的 Java 方法

Java：

在 Java 中，类中通常有方法来执行特定操作并将值返回给调用者。例如，您可能有一个名为 Calculator 的类，其中包含计算两个数字之间差异的方法：

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

^在另一个类中，您创建 Calculator 类的实例并调用该方法。

反应：

React 遵循类似的概念，但它关注的是组件之间的关系。

当您的父组件包含子组件时，回调函数有助于促进它们之间的通信。 （请记住：父级是容纳其他组件的主容器 - 类似于我们之前的父级“登陆页面”示例以及消息框的子组件）

例如，假设您有一个 ChildComponent，需要将一些计算数据发送回其父组件。

下面我们将handleCalculationResult函数作为prop从父级传递给子级。

此函数的作用类似于回调：

  <p>Welcome to our page {username}</p>

您可以在下面看到 onCalculate 是如何在 ChildComponent 中从父组件接收到的回调函数。

当点击ChildComponent中的按钮时，它会执行计算并使用onCalculate将结果发送回父级。这模仿了 Java 方法如何将值返回给调用者。

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

通过这种方式，父级管理整个应用程序状态和行为，而子级则专注于特定操作（在本例中为计算）。

以上是通过java镜头看react的详细内容。更多信息请关注PHP中文网其他相关文章！