usestate 初始值不能是函数调用结果，因每次父组件重渲染都会执行该调用，造成不必要计算和副作用；应传函数引用 usestate(getinitialvalue)，react 仅在首次渲染时调用它。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
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)。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：点击按钮多次，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 类型推导容易断掉
