用途:该技能用于指导 React 中 useState Hook 的规范使用,适用于为组件添加状态、在 useState 与其他 Hook 之间做取舍,以及排查状态相关问题时参考。
主要能力:说明 useState 的基本形式 const [state, setState] = useState(initialState);列举典型场景,如表单输入、UI 开关状态、简单计数器和组件本地数据;给出使用条件,如状态属于组件本地、状态转换简单、变化需要触发重渲染、需在渲染间保留值。
替代与边界:不需要重渲染的可变值(定时器 ID、DOM 引用、上一次的值)应用 useRef;状态逻辑复杂、含多个子值或下一步依赖上一步时应用 useReducer;能从 props 或其他状态推导出的值不应另存为状态,必要时用 useMemo。跨组件共享状态应使用 Context 或外部状态库,服务端异步数据应使用相应数据请求库。
关键规则:不要直接修改状态对象或数组,应创建新对象或新数组;状态更新是异步的,设置后立即读取仍得到旧值;连续更新应使用更新函数,例如 setCount(c => c + 1);初始值计算开销大时应传入初始化函数而非直接调用;Hook 只能在顶层调用,不能放在条件语句中。
常见模式:通过 key 变化让组件重新挂载以重置状态;在状态中保存函数时需用箭头函数包裹;更新对象用展开加覆盖,更新数组用 filter、map、展开等生成新数组。
限制:资料未提供版本要求、安装命令、适用平台、收费或效果数据,这些暂未提供。