6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年5月13日 りあクト! 第7章 単方向データフロー (p.108~)

単方向データフローとは

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

双方向バインディング

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

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

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>
  );
}

stateのリフトアップ

コンポーネントのstateを親コンポーネントに移して、子コンポーネントのpropsに対してstateの値を渡すように実装することです。

Learn Once, Write Anywhere (ひとたび習得すれば、あらゆるプラットフォームで開発できる)

コードを丸々共有することはできないが、コンポーネントベースなReactの書き方を学べば、レンダラーを変更する事でいろんなプラットフォームの開発ができるという意味でこのフレーズが使われています。

参考

りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】

フォームの例