🍣
状態をリセットしたいとき(React)
UI ツリー
React はツリー構造を使用して、作成した UI を管理およびモデル化します。
React は JSX から 独自の DOM ツリーを作成します。
次に、React DOM はブラウザの DOM 要素を更新して、その 独自の DOM ツリーに一致させます。
コンポーネントに状態を与えると、その状態がコンポーネント内に存在すると思うかもしれません。
しかし、状態は実際には React 内(メモリ内)に保持されます。
React は、保持している状態の各部分を、そのコンポーネントが UI ツリー内のどこにあるかによって、正しいコンポーネントに関連付けます。
コンポーネントの状態のリセットの仕方
状態を保持させたくない・フォームの値をリセットさせたいなどの時に State を消去する方法を下記します
- コンポーネントのレンダリングが停止させて、要素が消す
- ツリーの同じ場所に別の要素が生成する
- コンポーネントを別の場所にレンダリングする
-
key
を使用する
// 状態がリセットされない
{
isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />;
}
// 状態がリセットされる
{
isPlayerA && <Counter person="Taylor" />;
}
{
!isPlayerA && <Counter person="Sarah" />;
}
// 状態がリセットされる
{
isPlayerA ? (
<Counter key="Taylor" person="Taylor" />
) : (
<Counter key="Sarah" person="Sarah" />
);
}
コンポーネント関数の定義をネストしてはいけない理由
親コンポーネントのレンダリングごとに異なる子コンポーネント関数が生成されることになり、
同じ位置に別のコンポーネントが生成されることになり、状態がリセットされます。
この問題を回避するには、常にコンポーネント関数を最上位で宣言し、定義をネストしないでください。
フォームを入力した状態で、ボタンを押すとフォームの値が消えます。
React 内部では、生成されたフォームコンポーネントは前後で別のコンポーネントとしてみられていることになります。
Discussion