JavaScript框架是解决复杂交互与状态管理的工具，React/Vue通过声明式语法显式定义“状态→视图”映射，自动追踪依赖、批量更新；useState驱动UI更新，useRef保存不触发渲染的可变值；框架带来可控性，也要求遵守其规则以避免竞态等问题。
JavaScript 框架不是“必须装的软件”，而是为解决特定问题而生的工具集合——当你开始写超过 3 个交互模块、状态在多个组件间来回传递、DOM 更新频繁且逻辑缠绕时，vanilla JS 就会明显吃力。React 和 Vue 不是替代 JavaScript，而是帮你约束它、组织它、预测它。
为什么直接操作 document.getElementById 会很快失控
小项目里手动查 DOM、绑定事件、拼接字符串更新内容确实快；但一旦页面有搜索筛选 + 分页 + 用户登录态 + 表单校验 + 异步加载，状态就散落在全局变量、闭包、事件回调、定时器里。你改一个按钮点击逻辑，可能意外清空了另一个区域的数据，因为没人能准确说出“当前所有状态在哪、谁在用、谁该更新”。
React/Vue 的核心价值，就是用声明式语法把“状态 → 视图”的映射关系显式写出来，让框架替你追踪依赖、批量更新、避免无效渲染。
- 每次
setState或修改ref/reactive对象，框架知道哪些组件依赖这个值，只重绘它们 - 模板里写
{user.name}，不用手动el.textContent = user.name，也不用担心 DOM 被删了还去更新它 - 错误边界（
ErrorBoundary）或onErrorCaptured可以局部捕获组件异常，不至于整个页面白屏
useState 和 ref 看似相似，但触发更新的行为完全不同
这是初学者最容易混淆的点：两者都存数据，但只有 useState 的更新会触发组件重渲染；ref 改了值，视图不会变——它只是个“带 .current 的盒子”，适合存定时器 ID、DOM 元素、不参与 UI 的缓存数据。
立即学习“Java免费学习笔记（深入）”；
比如你在 useEffect 里启动一个轮询，想在卸载时清除，就得用 ref 存 setInterval 返回的 ID；如果误用 useState 存它，每次 setIntervalId 都会引发无意义重渲染，还可能因异步导致清除错对象。
-
useState：用于驱动 UI 变化的状态，如isSubmitting、searchQuery -
useRef：用于跨渲染周期保持可变值，且不触发更新，如inputRef、timerRef - Vue 中同理：
ref()响应式变量用于模板绑定；ref()非响应式引用（如const countRef = ref(0)在setup()外定义）仅作容器
框架不是银弹，它引入的新问题必须主动管理
用 React 后你会遇到 React Hook rules 报错、stale closure（闭包捕获旧 state）、useMemo 依赖数组漏项；Vue 3 的 reactive 对嵌套对象深层响应有陷阱，toRefs 解构后丢失响应性。这些问题不是框架“设计缺陷”，而是它把原本隐式发生的副作用（比如手动更新 DOM）变成了显式契约——你得按规则写，否则它无法保证行为可预测。
- React 中 useEffect 依赖数组必须完整列出所有外部变量，漏掉
onSuccess导致回调永远用初始值 - Vue 中对
reactive({ a: { b: 1 } })直接赋值obj.a = { b: 2 }，会丢失a的响应性，要用Object.assign或...spread - 两者都默认不做 deep equality 比较：
useMemo(() => data.items, [data])中data是新对象引用，即使内容没变也会重新计算
框架的价值不在“多酷”，而在“可控”。它把不可靠的手动同步，换成可追踪、可调试、可测试的状态流。但这份可控，是以接受它的约束为前提的——跳过规则省下的几行代码，往往会在两周后变成难复现的竞态 bug。
