Reactにおけるコンポーネントデータ

コンポーネントデータは、3つの場所に保存することができます：props、コンポーネントの変数と定数、そしてstateです。propsには、親コンポーネントが外部からコンポーネントに送信するデータが格納されます。この場合、コンポーネント内部ではpropsは不変であるべきです。

変数、定数、およびstateには、コンポーネント自身にとって重要であり、親コンポーネントが知る必要のないローカルデータを保存するべきです。その際、stateには、様々なイベントで変化する可能性があり、かつその変更をリアクティブにしたいデータを保存するべきです。

jsxfunction Test() {
  // isEdit、elem、dataの定義
  
  if (isEdit) {
    elem = <input value={data} />;
  } else {
    elem = <span>{data}</span>;
  }
  
  return <div>
    {elem}
  </div>;
}