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

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

2022年5月17日 りあクト! 第8章 コンポーネントのメンタルモデル (p.126~)

Reactの差分検出処理エンジン

Reactではstateの値とpropsの値に差分を検出すると、コンポーネントレンダリング処理を再実行します。

stateとprops

  • stateは、コンポーネントが持つ状態のことです。
  • stateでは、エラーがあるか、モーダルウィンドウが開いているか、ボタンを押せるかなどの状態を管理します。
  • Reactの関数コンポーネントでstateを使うためには、useStateという関数を使います。

    • const [count, setCount] = useState(初期値);
    • countが、stateを持った変数になります。
    • setCountには、countというstateを更新するための関数が分割代入されます。
  • propsは、親コンポーネントから子コンポーネントに渡すことができる引数のようなものです。
  • stateの値をpropsという仕組みを使って、子コンポーネントに渡すこともできます。

stateとpropsの受け渡し

import "./styles.css";
import { useState } from "react";

// propsとして渡す値の型エイリアスを定義
type Books = {
  name: string;
  cost: number;
  onCount: React.Dispatch<React.SetStateAction<number>>;
};

// 関数コンポーネントに渡ってくるpropsの型と戻り値の型を定義(呼び出し可能オブジェクトを型エイリアスで定義)
type BookType = {
  ({ name, cost, onCount }: Books): JSX.Element;
};

const Book: BookType = ({ name, cost, onCount }) => { // propsを分割代入で受け取る
  return (
    <>
      <div>{name}</div>
      <div>{cost}</div>
      <button onClick={() => onCount((prevCount) => prevCount + 1)}>ボタン</button>
    </>
  );
};

export default function App() {
  const [count, setCount] = useState(300); // useStateを使ってstateを定義(初期値200)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Book name={"book"} cost={count} onCount={setCount} />
    </div>
  );
}
◆ Appコンポーネント
  • Bookコンポーネントを呼び出しています。
  • propsにname、cost、onCountという変数を渡しています。
    • cost、onCountはuseStateです。初期値は300です。
◆ Bookコンポーネント
  • Booksという型エイリアスを定義し、関数の引数に使用しています。
  • 関数の引数と戻り値を呼び出し可能オブジェクトを用いてBookTypesとして型定義を行っています。
  • Appコンポーネントで指定したpropsを分割代入で受け取ります。
  • Bookコンポーネント内でpropsを用いてカウント処理を実装しています。
◆ useState

useStateではstateを更新する際にsetCountを用います。

const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);

上記の書き方のようにstateを使わなくてもアロー関数の引数にstateを受け取ることができるため、下記のように記述する方が好ましいです。

const increment = () => setCount((prevCount) => prevCount + 1);

参考

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