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~