在Cursor中开发React自定义Hook需创建src/hooks/useCounter.tsx文件，用function useCounter(initialValue: number = 0) { }结构，自动补全useState并返回{ count, increment, decrement }，避免冗余泛型，用useRef处理步长，通过useEffect+localStorage实现持久化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中开发React项目时，写自定义Hook需要兼顾编辑器特性（如AI补全、文件索引、实时预览）与React的规则约束，不能只照搬传统VS Code流程。Cursor对TSX文件的类型推断更激进，但对未显式导出的函数不会自动识别为Hook，容易导致eslint-plugin-react-hooks报错或AI建议失效。
创建自定义Hook文件
在src/hooks目录下新建useCounter.tsx文件（注意扩展名必须是.tsx，否则Cursor的AI无法正确推断JSX上下文）。
右键点击src/hooks → New File → 输入useCounter.tsx → 回车确认。如果hooks目录不存在，先手动创建该文件夹，【否则Cursor可能将文件生成在根目录，导致import路径混乱】。
这一步操作起来很简单，直接把文件拖进去就行。
编写基础结构
输入function useCounter() {后按Tab，Cursor会自动补全函数签名和return语句；接着在花括号内敲useState(0)，它会自动导入React并补全解构赋值。
补全后手动添加return { count, increment, decrement };，确保返回对象字段名与内部变量一致——Cursor的AI有时会把increment误补成add，需人工核对。
不要用const [count, setCount] = useState
添加参数与逻辑增强
方法一：支持初始值配置
修改函数声明为function useCounter(initialValue: number = 0) {，然后将useState(initialValue)替换原useState(0)；Cursor会在你输入= 0时自动补全默认参数语法。
方法二：支持步长控制
在return对象中增加step属性，并新增setStep方法；注意不要直接在Hook里调用setState更新step，应改为useRef保存当前步长值，否则每次render都会重置——这是React Hook规则硬性要求，Cursor不会主动校验这点。
方法三：集成useEffect实现持久化
① 在useCounter函数顶部添加const storageKey = `counter_${initialValue}`；
② 插入useEffect(() => { localStorage.setItem(storageKey, count.toString()); }, [count, storageKey])；
③ 在useState下方读取localStorage.getItem(storageKey)并转为数字，作为initialValue的备选值；【务必用parseInt或Number转换，否则count会变成字符串类型，后续++运算出错】。
