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