useState 初始值不能是函数调用结果，因每次父组件重渲染都会执行该调用，造成不必要计算和副作用；应传函数引用 useState(getInitialValue)，React 仅在首次渲染时调用它。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
React 中 useState 的初始值为什么不能是函数调用结果？
因为 useState 的初始值只在组件首次渲染时求值一次，如果传入的是函数调用（比如 useState(getInitialValue())），这个函数会在每次父组件重渲染时执行，造成不必要的计算和潜在副作用。
正确做法是把函数本身传进去：useState(getInitialValue) —— 注意没有括号。React 会自动在初始化时调用它，且仅一次。
- 常见错误现象：控制台没报错，但初始数据每次刷新都变，或接口被重复请求
- 适用场景：初始值需要异步获取、依赖 props 计算、或开销较大（如深克隆大对象）
- 性能影响：直接调用函数 → 每次 render 都执行；传函数引用 → 仅 mount 时执行
- 注意：
getInitialValue必须是纯函数，不能依赖组件内部的 state 或 ref
useEffect 里发请求，为什么总拿到旧的 state？
这是闭包导致的经典问题：effect 回调捕获的是定义时的 state 值，而不是最新值。尤其在异步操作（如 fetch）完成后再更新 state 时，容易写成 setCount(count + 1)，但这里的 count 是 effect 创建时的快照。
解决方法不是加依赖数组，而是用函数式更新：setCount(c => c + 1)。
立即学习“前端免费学习笔记（深入）”；
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 常见错误现象：点击按钮多次，state 只加了 1；或请求返回后更新的数据不是预期值
- 使用场景：异步请求完成后需要基于当前 state 更新（如分页加载、乐观更新）
- 参数差异：普通更新
setState(newValue)→ 拿到旧值；函数式更新setState(prev => ...)→ 拿到最新 prev - 兼容性：所有 React 版本都支持，不依赖
useRef或额外 hooks
自定义 Hook 如何避免无限循环？
只要自定义 Hook 内部用了 useEffect 或 useCallback，又把某个变量（尤其是对象、数组、函数）直接写进依赖数组，就极可能触发无限 rerender。
根本原因是：每次渲染都会新建这些引用类型，即使内容相同，=== 也不等，effect 就认为依赖变了，于是执行、更新 state、再次渲染……
- 常见错误现象：页面卡死、CPU 占满、控制台疯狂打印
- 实操建议：对对象/数组用
JSON.stringify做浅比对（仅限简单结构）；更稳妥的是用useMemo缓存，或拆出稳定引用（如用useRef存函数） - 性能影响：无限循环会让组件完全不可用，不是慢，是崩溃级问题
- 特别注意：
useCallback包裹的函数如果依赖了未声明的变量，ESLint 不一定报错，但运行时会出问题
useReducer 替代 useState 的真实分界点在哪？
不是“逻辑复杂了才用”，而是当 state 更新逻辑涉及多个关联字段、条件分支多、或需要回溯/撤销时，useReducer 才真正体现出价值。单纯“多个 useState”并不构成升级理由。
比如表单有 name、email、isValid、errors 四个字段，且 email 改变要清空 errors、重置 isValid，这时用 reducer 把所有变更归到一个函数里，比分散的 setState 更易维护。
- 常见错误现象：用
useReducer管理单个布尔值，反而增加理解成本 - 使用场景：表单状态、模态框栈、画布操作历史、权限状态机
- 参数差异：reducer 函数必须是纯函数，不能有副作用；副作用得交给
useEffect处理 - 容易被忽略的一点：reducer 里不要解构 state，直接用
state.xxx—— 否则 TypeScript 类型推导容易断掉
