第十五章：State 设计 —— 空调面板别把所有按钮焊死在一起

很多初学者一上来会这样存 state：

tsx

function AirConditioner() {
  const [ac, setAc] = useState({
    isOn: false,
    temp: 26,
    mode: 'cool',
    fanSpeed: 2,
  });
}

这不是绝对错，但很容易让你每次改一个字段都要“整块拆开重焊”：

tsx

setAc(prev => ({
  ...prev,
  temp: prev.temp + 1,
}));

React 里最重要的 state 设计原则：

text

只存“会变、而且页面真的需要它”的数据

不要存：
1. 能从别的数据算出来的东西
2. 重复数据
3. 明明是 props，却又抄一份进 state

例如：

tsx

function AirConditioner({ defaultTemp }) {
  const [temp, setTemp] = useState(defaultTemp);
  const temperatureText = `${temp}°C`;
  return <div>{temperatureText}</div>;
}

什么时候拆成多个 state，什么时候合在一起？

场景	更适合
几个值总是一起改	合成一个对象
几个值经常单独改	拆成多个 state
结构复杂、更新规则多	考虑 useReducer

就像空调面板设计，如果“开关、温度、模式”每次都一起换，可以做成一个控制模块；如果它们经常单独操作，就别焊成一整块铁板。