React での一方向データバインディング

1. React での一方向データバインディング
2. React での一方向データ バインディングと双方向データ バインディング

現在、フロントエンド開発者には、Web アプリケーションを構築するための 3つの選択肢があります。React、Vue、および Angular JavaScript フレームワークです。 これらのフレームワークは多くの類似点を共有していますが、重要な点でも異なります。

この記事では、React での一方向データ バインディングについて説明します。 これは、React ライブラリの際立った機能の 1つであり、React Web アプリケーションの構造と機能に影響を与えます。

React での一方向データバインディング

他の JavaScript フレームワークとは異なり、React には DOM 入力要素の値を状態変数に関連付ける機能がありません。 要素に新しい文字を入力しても、状態変数は自動的に更新されません。

React コンポーネントの構造は、通常、動的機能が追加された HTML に似た構文を持つ JSX で記述されます。

ユーザーのアクションに応答して状態を更新するには、イベント ハンドラーを定義し、ユーザーのアクションに応答してイベント ハンドラーを実行する属性を設定する必要があります。

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
    </div>
  );
}

この例では、ユーザーのアクションによって onChange イベント ハンドラーがトリガーされ、状態変数が更新されます。 次に、この値を <h2> タグとして表示できます。

React での一方向データ バインディングと双方向データ バインディング

React、Angular、および Vue の比較。どちらも双方向のデータ バインディングを備えています。

双方向バインディングは、入力 (DOM 要素) とデータの間の双方向接続をセットアップして、一方が更新されるたびにもう一方も更新されると考えることができます。

たとえば、Vue では、入力要素の値を状態値に関連付けることができます。 これを変更すると、入力要素の値も変更されます。

また、input 要素にさらに文字を入力すると、状態値が変更されます。

React では、入力 DOM 要素の値と状態の間に直接的な関係を設定する方法はありません。 ユーザーからの新しい入力を検出するたびに状態を更新するようにイベント ハンドラーを設定できます。

通常、状態を変更しても <Input> 要素の値は変更されません。

この例を見てみましょう。

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
      <button onClick={() => setValue(value.concat(value))}>
        Double the Text
      </button>
    </div>
  );
}

ここでは、内部値が状態変数に関連付けられていない <input> 要素があります。 ただし、ユーザーが文字を入力するたびに、React はイベント ハンドラーを実行し、状態変数 value をユーザー入力に等しく設定します。

これは、状態変数を <h2> ヘッダーとして出力するときに実証されます。

テキストを 2 倍にする というラベルの付いたボタンもあります。 このボタンをクリックすると、状態変数を追加して更新する別の関数が実行されます。

コードをよりよく理解するには、この CodeSandbox デモ にアクセスしてください。 ボタンを使用して状態値を変更しても、input 要素には影響しません。

その理由は、React には入力要素と状態変数の間に双方向のデータ バインディングがないためです。