なぜ必要なのか

複数の操作が同じデータの変化を表示します。ラベルを別々に書き換えると、矛盾する状態が出やすくなります。

どう解決するのか

現場ノートのカード2枚は未保存で開始します。A17を保存すると、そのカードだけ保存済みになり、B04は変わりません。B04も保存すると合計は1から2になります。同じIDを再び保存しても合計は2です。図はイベント・状態更新・描画をつなぎます。リセット・再読み込みで両方を消します。永続保存はありません。

React: 概念シミュレーション

概念シミュレーション

React

各カードを保存します。IDごとに1回だけ数え、もう一方は変わりません。

共通の管理元 · 保存ID

タイトルのプロップス ↓ · 状態はIDごと

A17

現場ノート

B04

現場ノート

  1. 保存イベント
  2. 状態設定が描画を要求
  3. ラベルと合計を描画

保存数: 0 / 2

A17: 0 · B04: 0

待機

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

どんな考え方なのか

Reactのコンポーネントはプロップスを受け取り、状態からUIを表します。状態の設定関数は描画を要求します。通常の変数を変えるだけでは同じ仕組みになりません。

永続保存は別に追加します。

出典