Javaレンズを通して反応を見る

私たちのコーディング ブートキャンプでは、React をスピードランしてラボで汗を流しているときに、インストラクターがこう言いました。「目を細めて見ると、React は Java によく似ています。」

最初は、ただのキャッチーで面白いフレーズでした。 ?しかし、つい最近、私は個人的な Google マップ計算プロジェクトに取り組んでいるときに React を再検討しました。何日も深く掘り下げると、それらの類似点のいくつかが明らかになり始めました。

これらの接続を詳しく調べて、Java の基本概念が React の理解をどのように明らかにするかを見てみましょう。 ?

目次

1. Java メイン クラスとしての App.jsx (psvm)

2. Java ゲッターおよびセッターとしてフックを使用した状態管理

3. Java クラスとしてのコンテナ

4. Java メソッドとしてのコンポーネント

5. React のコンポーネントへの復帰

6. Java メソッドのパラメータとしての小道具

7. 値を返す Java メソッドとしてのコールバック関数

---

1. Java メイン クラスとしての App.jsx (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 でのメソッドの呼び出しまたはオブジェクトの初期化のプロセスを反映しています。

この場合、コンテナ <ホーム />ページは Web ページの URL パスに基づいてレンダリングされます。

---

2. Java ゲッターおよびセッターとしてのフックを使用した状態管理

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 はセッター メソッドとして機能し、ユーザー名の更新を可能にします。 useState("") はユーザー名が空の文字列として初期化されることを意味しますが、setUserName は値を更新します。

以下には、Web フォームの変更を検出してユーザー情報を更新し、ユーザー名の値をユーザーが入力した値に更新する関数 handleInputChange があります。

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

• ユーザー名へのアクセスはゲッターとして考えることができます。

コンポーネント内でユーザー名を参照するときは常に、ゲッターを使用してその値にアクセスすることになります。たとえば、私の Web ページでは次のようにユーザー名をレンダリングできます:

<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 呼び出しからのデータの取得やアプリの状態の管理などを処理します。

この例では、Calculator コンテナーが入力値と結果の状態を管理します。

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. Java メソッドのパラメータとしての Props

Java:

Java メソッドに引数を渡すことができ、その引数は呼び出し元オブジェクトの状態や動作に影響を与えることができます。

たとえば、メッセージをパラメータとして受け取る単純な Java メソッドを考えてみましょう。受信するメッセージは、コンソールに表示される内容に影響します。

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

反応:

React では、コンポーネントは Java メソッドのパラメーターに似た props を受け取ることができます。 React コンポーネントは props を使用してそのコンテンツと機能を決定します。

プロップは、コンポーネントがどのように動作するか、およびコンポーネントが表示するデータを制御します。

MessageDisplay 子コンポーネントにメッセージを渡す WelcomePage という親コンポーネントがあるとします。

言い換えると、MessageDisplay が、メッセージが表示される WelcomePage ランディング ページ上のセクションであると想像してください。

親コンポーネントでメッセージを定義し、それを MessageDisplay コンポーネントにプロップとして渡すことができます。

private String username;

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

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

MessageDisplay コンポーネントはこの prop を受け取り、レンダリングします。

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

---

7. 値を返す Java メソッドとしてのコールバック関数

Java:

Java では、特定のアクションを実行して呼び出し元に値を返すメソッドがクラス内に存在することがよくあります。たとえば、2 つの数値の差を計算するメソッドを備えた 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レンズを通して反応を見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。