26. 保存与重置 state

本节目标：理解 React 根据组件位置管理 state 的规则，掌握用 key 重置组件的技巧。

state 和组件位置绑定

React 不是按组件名追踪 state，而是看组件在 UI 树中的位置。这一点新手容易搞混。

function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

两个 Counter 各自有独立的 state，因为它们在树中处于不同位置。

相同位置，state 保留

function App() {
  const [isFancy, setIsFancy] = useState(false);

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

不管 isFancy 怎么变，Counter 始终在 div 的第一个子位置。React 认为是同一个组件，state 保留。

位置比标签重要

JSX 里写两个 <Counter /> 标签，但渲染树中只有一个位置。React 看的是渲染树，不是 JSX 源码。

不同位置，state 重置

function App() {
  const [isFancy, setIsFancy] = useState(false);

  return (
    <div>
      {isFancy && <Counter />}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={e => setIsFancy(e.target.checked)}
        />
        切换
      </label>
    </div>
  );
}

勾选时 Counter 出现在 div 里，取消时消失。再次勾选，Counter 重新挂载，state 从零开始。

用 key 强制重置

有时候你想让同一个位置的组件也重置 state。用 key：

function ProfilePage({ userId }) {
  return (
    <Profile userId={userId} key={userId} />
  );
}

key={userId} 告诉 React：不同 userId 是不同的组件。切换 userId 时，旧组件卸载（state 销毁），新组件挂载（state 初始化）。

key 重置的典型场景

表单切换不同实体、聊天室切换房间、Tab 切换后重置滚动位置。

实战：聊天室切换

function ChatApp() {
  const [roomId, setRoomId] = useState('general');

  return (
    <>
      <select value={roomId} onChange={e => setRoomId(e.target.value)}>
        <option value="general">综合</option>
        <option value="music">音乐</option>
        <option value="tech">技术</option>
      </select>
      <ChatRoom roomId={roomId} key={roomId} />
    </>
  );
}

切换房间时，ChatRoom 的输入框、滚动位置等 state 全部重置。

实战：表单重置

function EditUser({ userId }) {
  return <UserForm userId={userId} key={userId} />;
}

function UserForm({ userId }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // 切换 userId 时，key 变化，组件重置
  // name 和 email 自动回到初始值
}

保留 state 的技巧

不想重置？把 state 提到父组件，或者不用 key：

function App() {
  const [comment, setComment] = useState('');

  return (
    <>
      {showA && <RoomA comment={comment} setComment={setComment} />}
      {showB && <RoomB comment={comment} setComment={setComment} />}
    </>
  );
}

或者用 CSS 隐藏代替条件渲染：

function App() {
  return (
    <div>
      <Counter style={{ display: showA ? 'block' : 'none' }} />
      <Counter style={{ display: showB ? 'block' : 'none' }} />
    </div>
  );
}

CSS 隐藏的代价

隐藏的组件仍然挂载，占用内存。长期不用的组件建议条件渲染 + key 重置。

规则总结

场景	state 行为
相同位置，相同组件	保留
相同位置，不同组件	重置
组件从树中移除	销毁
相同位置，key 变化	重置

本节要点

React 按组件位置追踪 state
相同位置相同组件 → state 保留
key 可以强制让组件重置
切换实体、重置表单用 key