React 学习笔记(四): 变量管理 useRef + useMemo + useState

⚛️ React Hook 学习笔记：useRef vs useMemo vs useState

这三个 Hook 都是 React 中的“状态管理 & 性能优化”核心工具。
但它们的用途完全不同 👇

---

🧩 一、useState —— 管理组件状态（可触发渲染）

const [count, setCount] = useState(0);

return (
  <>
    <p>点击次数：{count}</p>
    <button onClick={() => setCount(count + 1)}>+1</button>
  </>
);

✅ 特点

• 用于保存“会影响 UI”的状态
• 更新会触发组件重新渲染
• 值在每次渲染中都是独立的

⚠️ 注意

• 每次 setCount 都会重新渲染组件。
• 不适合存储不会显示在页面上的数据。

---

🧠 二、useRef —— 保存引用（不会触发渲染）

const inputRef = useRef<HTMLInputElement>(null);

const focusInput = () => {
  inputRef.current?.focus();
};

return (
  <>
    <input ref={inputRef} placeholder="点我聚焦试试" />
    <button onClick={focusInput}>聚焦输入框</button>
  </>
);

✅ 特点

• 保存一个可变的引用值，跨渲染周期不变。
• 修改 .current 不会触发渲染。
• 常用于：
  • 访问 DOM 元素（如上例）
  • 保存上一次的值、定时器 ID 等

⚠️ 注意

useRef 是“静态的”，值变化不会更新 UI。

---

🚀 三、useMemo —— 性能优化（缓存计算结果）

const expensiveValue = useMemo(() => {
  console.log("计算中...");
  return data.filter(d => d.active).length;
}, [data]);

✅ 特点

• 缓存“计算结果”，避免每次渲染都重复执行。
• 仅当依赖项 [data] 变化时才重新计算。

⚙️ 常见用途

• 计算复杂数据（如排序、过滤）
• 避免子组件重复渲染（搭配 React.memo）

⚠️ 注意

• 不会保存引用或状态，只缓存结果。
• 依赖项一定要写对，否则缓存无效或错误。

---

🧭 四、三者对比总结

Hook	是否触发渲染	用途	示例场景
useState	✅ 会	管理页面状态	按钮计数、表单输入
useRef	❌ 不会	保存引用或临时变量	获取 DOM、保存 timer
useMemo	⚙️ 不会（缓存结果）	性能优化（避免重复计算）	过滤、排序、大计算量函数

---

💡 小结

• 👉 想“保存数据并更新界面” → useState
• 👉 想“保存数据但不渲染” → useRef
• 👉 想“缓存计算结果” → useMemo