5分で読むReact豆知識 | 入門 | 第5回: stateの保持と破棄

はじめに

このシリーズは、Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめたものです。

シリーズ一覧はこちら

stateの保持と破棄

Reactは各コンポーネントごとにStateが保持され、レンダーツリーに沿ってstateを管理します。
コンポーネントが破棄されるとstateも破棄されます。
ただし、レンダリング時に同様なコンポーネントがあると判定された場合、stateは保持されることがあります。

stateが保持されるパターン

1.別々に記述していても保持されるパターン

同様なコンポーネントとみなされstateは保持されます。

{isFancy ? (
    <Counter isFancy={true} /> 
) : (
    <Counter isFancy={false} /> 
)}

2.構造が同じであるため保持されるパターン

リターン位置が違う場合も、構造が同じであればstateは保持されます。

if (isFancy) {
    return (
      <div>
        <Counter isFancy={true} />
      </div>
    );
} else {
  return (
    <div>
      <Counter isFancy={false} />
    </div>
  );
}

stateが破棄されるパターン

1.条件付きレンダリングの記述をわける

条件付きレンダリングを別々に記述すると、レンダリング処理が個別に行われ破棄されます。

 <div>
      {isPlayerA &&
        <Counter person="Taylor" />
      }
      {!isPlayerA &&
        <Counter person="Sarah" />
      }
</div>

2.構造を変える

構造が違うとstateは破棄されます。

{isFancy ? (
 <div>
    <Counter isFancy={true} /> 
 </div>
) : (
    <Counter isFancy={false} /> 
)}

３.keyを使って各コンポーネントに明示的な識別子を付与する

同様な構成でもコンポーネントのkeyが違うとstateを破棄します。

  return (
    <div>
      {isPlayerA ? (
        <Counter key="Taylor" person="Taylor" />
      ) : (
        <Counter key="Sarah" person="Sarah" />
      )}

参考サイト

より詳しく学びたい方はこちら