第十二章：自定义 Hook —— 造一个万能遥控器

1 分钟 93 字第 34 / 962 个阅读单元

当多个组件有相同的逻辑时，把逻辑抽成自定义 Hook。

tsx

function useAirConditioner(initialTemp = 26) {
  const [isOn, setIsOn] = useState(false);
  const [temp, setTemp] = useState(initialTemp);
  const [mode, setMode] = useState('cool');

  useEffect(() => {
    if (temp > 28) setMode('cool');
    if (temp < 18) setMode('heat');
  }, [temp]);

  return {
    isOn, temp, mode,
    turnOn: () => setIsOn(true),
    turnOff: () => setIsOn(false),
    setTemp,
  };
}

每个组件调用 useAirConditioner() 都会得到独立的状态。就像同一个型号的遥控器，客厅的和卧室的互不干扰。