React

useState 触发重渲染并把最新值闭包进下一次渲染，适合驱动 UI 的数据；useRef 返回跨渲染稳定存在的对象，修改 current 不触发渲染，适合保存可变非渲染值：定时器 id、DOM 节点引用、上一次值、外部库实例。经典坑是闭包陷阱：事件处理器捕获渲染时的旧 state，setCount(count+1) 连点两次可能只加一，因为两次点击拿到的是同一渲染的旧值，需改用函数式更新 setCount(prev+1) 保证基于最新值；定时器里读到旧值同理要函数式更新或 ref 中转。初始化昂贵计算用惰性初始化 useState 传函数，避免每次渲染执行。凡是「变化但不需要屏幕反映」的都用 ref，凡是「屏幕要反映」的都用 state，这条判据能讲清就到位。

useEffect 在浏览器绘制之后异步执行，用于与渲染无关的副作用：订阅、请求、定时器、操作非 React 管理的 DOM。返回的清理函数在下一次 effect 重跑前与组件卸载时执行，用于取消订阅、清定时器、中止请求（AbortController），忘记清理是内存泄漏与竞态的根源。依赖数组语义：省略则每次渲染后都跑，空数组仅挂载时跑一次，列出依赖则浅比较后决定是否重跑；对象与数组依赖每次都是新引用导致频跑，应依赖原始值或用 useCallback、useMemo 稳定化。请求竞态要在清理里打布尔标志或 abort，保证旧响应不覆盖新响应。判例：能由渲染推导的不要放 effect（派生状态），能放事件处理器的交互逻辑不要放 effect。

声明式渲染下开发者描述 UI 与状态的关系，React 用虚拟 DOM（轻量 JS 对象树） diff 新旧两树，把最小变更批量为真实 DOM 操作，DOM 操作贵而 JS 对象比较便宜，这是基准性能策略。Fiber 是 React 16 重写的协调架构：把渲染拆成可中断的工作单元（fiber 节点链表），调度器按优先级分片执行，高优先级更新（用户输入）可打断低优先级渲染，避免长任务阻塞主线程卡顿；双缓冲机制让提交阶段原子切换。并发特性如 useDeferredValue 与 transition 建立其上。性能优化主线仍是减少无效渲染：memo 配合比较函数、useMemo 与 useCallback 稳定引用、列表 key 稳定且不用索引（顺序变动时）、虚拟化长列表。能讲 diff 假设（同层同类型比较）加 Fiber 可中断两点即好。

分层决策：组件内部 UI 状态用 useState；跨层级共享但范围有限用 context（主题、语言、当前用户），注意 context 值变化会使所有消费组件重渲染，应拆分 context 或 memo 化 value；服务端数据缓存用 TanStack Query（原 React Query）或 SWR，自带缓存、重试、失效与去重，别把接口数据搬进 Redux 徒增复杂度；真正复杂的客户端共享状态（编辑器、协同画布、多视图联动）才上 Zustand 或 Redux Toolkit。Zustand 轻量无 Provider、selector 订阅细粒度更新；RTK 生态成熟、DevTools 与中间件完善，适合大团队规范诉求。新项目默认组合是本地 state 加 TanStack Query 加轻量全局库。能按状态类型分层给结论而非背 API 即优秀。

受控组件把表单值放 state，input 的 value 绑定 state、onChange 回写，React 成为唯一数据源，便于即时校验、条件禁用、格式化与联动（如确认密码比对），代价是每次击键触发渲染，大表单需权衡性能（debounce 或拆组件）。非受控组件让 DOM 自己管值，用 defaultValue 设初值、ref 在提交时读取，类似传统 HTML 表单，适合文件输入（value 只读必须非受控）、简单场景与性能敏感的巨型表单。折中方案 react-hook-form 走非受控加 ref 注册，减少重渲染并提供校验生态。判断口诀：值需要实时影响渲染或校验就受控，只在提交时需要就非受控。延伸可提 FormData API 一次收集整个表单，以及 number 类型 input 值是字符串的坑。