第七章：useRef —— 空调的内部零件直通线

1 分钟 165 字第 29 / 962 个阅读单元

useState 改了值会触发重新渲染。但有些东西改了不需要刷新面板，比如压缩机的内部引用、定时器 ID。

tsx

function AirConditioner() {
  const [temp, setTemp] = useState(26);

  const compressorRef = useRef(null);
  const totalRunSeconds = useRef(0);

  useEffect(() => {
    const timer = setInterval(() => {
      totalRunSeconds.current += 1;
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <p>温度: {temp}°C</p>
      <div ref={compressorRef}>压缩机模块</div>
    </div>
  );
}

useState vs useRef：

	useState	useRef
改了会重新渲染？	✅ 会	❌ 不会
用途	需要显示在页面上的数据	内部计数器、DOM 引用、定时器 ID
类比	空调的显示面板	空调的内部电路板