Yanonoblog!

こつこつと

単方向&双方向データフロー

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

超基礎的な内容です！

単方向データフローとは

Reactでは親コンポーネントから子コンポーネントにpropsという形でデータが流れ落ちます。子コンポーネントから親コンポーネントにデータが逆流することはありません。

この特性により、Reactはコンポーネントの間でデータがどのように動くかを予測しやすく、コードの管理も容易になります。

双方向バインディング

親コンポーネントと子コンポーネント間でデータの共有する方法です。

双方向バインディングを使用すると、親と子コンポーネント間でデータが同時に更新されます。

Reactではこの双方向データバインディングは採用されておらず、親から子へと一方的にデータが流れる単方向データフローが基本です。

Reactでフォームを実装する場合

import { useState } from "react";

import "./styles.css";

export default function App() {
  const [state, setState] = useState("");

  const handleSubmit = () => {
    alert(state);
  };

  const handleChange = (e: any) => {
    console.log(e.target.value);
    setState(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={state}
          onChange={(e) => handleChange(e)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Props

Reactのコンポーネントの基本的な要素の1つはプロパティ（props）です。親コンポーネントから子コンポーネントへデータを渡す際に使用され、単方向データフローの原則をサポートしています。

バケツリレーとは？

"Propsバケツリレー"というフレーズは、データが親コンポーネントから子、孫、曾孫のコンポーネントへと伝えられる様子を表しています。

親コンポーネントから深くネストされたコンポーネントへデータを手渡すことがしばしば必要になり、まるでバケツリレーのように情報を一つずつ下のレベルへと渡していく様子を表しています。

例

下記の例では、Parentコンポーネントがデータを持っており、そのデータをChildコンポーネントに渡し、最終的にはGrandChildコンポーネントに渡しています。これがバケツリレーの基本的なイメージです。

// Parent Component
const Parent = () => {
  const data = 'Important data!';

  return <Child data={data} />;
};

// Child Component
const Child = (props) => {
  return <GrandChild data={props.data} />;
};

// GrandChild Component
const GrandChild = (props) => {
  return <h1>{props.data}</h1>;
};

バケツリレーの問題点

バケツリレーは単純で理解しやすい一方で、アプリケーションが複雑になると問題が生じます。

データを利用するコンポーネントが深くネストされている場合、それを取り巻く中間のコンポーネントが全てのデータを透過的に扱う必要があります。

こうなるとコードが冗長になり、コンポーネントが互いに密結合になってしまうため注意が必要です。

参考

続く…

コメント

本記事の内容は以上になります！

書籍の続きのアウトプットも随時更新したいと思います。


プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky