新建空白.tsx文件后首行写：// 创建一个计数器组件，使用useState记录数值，点击按钮+1，重置按钮清零。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在VS Code里用通义灵码快速生成一个带状态管理、可交互的React组件，而不是手动写useState/useEffect、补全类型、拼接JSX结构再反复调试。
新建文件后第一行怎么写提示词
新建一个空白.tsx文件，光标置于首行，输入双斜杠注释：// 创建一个计数器组件，使用useState记录数值，点击按钮+1，重置按钮清零。
这句必须包含动词“创建”和核心行为关键词（如“useState”“点击”“+1”），否则灵码可能返回无状态的静态展示组件。
按Alt+Q触发生成，AI会自动识别为函数组件，并跳过class写法。
让状态逻辑符合最佳实践的三种写法
方法一：显式声明初始值与类型
在空文件中输入：// React函数组件CountButton，count初始值为0，类型number，点击increment按钮加1，reset按钮设为0。灵码会生成const [count, setCount] = useState<number>(0)</number>，避免any类型污染。
方法二：惰性初始化防性能陷阱
若初始值需计算（如解析localStorage），必须写成useState(() => JSON.parse(localStorage.getItem('config') || '{}'))。【通义灵码默认不加括号，你得手动补上，否则每次渲染都执行JSON.parse】。
方法三：绑定事件时直接写内联逻辑
输入：// 按钮点击时调用setCount(prev => prev + 1)，不用中间变量。这样生成的代码天然规避闭包陷阱，无需后期重构。
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
生成带useEffect的组件要盯住依赖数组
第一步：在.tsx文件顶部输入注释：// 创建Timer组件，每秒更新count，页面卸载时清除定时器。
第二步：触发Alt+Q，检查生成的useEffect代码——它应包含清理函数return () => clearInterval(id)，且依赖数组为空[]。
第三步：确认effect内部所有变量都在依赖数组中列出。【若组件接收props.onTick，但依赖数组漏掉onTick，会导致回调始终调用首次渲染时的旧函数】。
批量创建标准组件目录结构
打开终端，执行：git clone https://github.com/LGDHuaOPER/createTemplateFile。
进入目录并运行：cd createTemplateFile → npm install → node index.js --framework=react --type=atom --ts。
脚本会自动生成src/components/Button/index.tsx、index.stories.tsx、Button.test.tsx及配套样式文件，【必须确保当前目录存在package.json，否则脚本无法识别项目类型】。
