如何熟练使用react和ts

从“会写”到“熟练”，重点不是再学一遍语法，而是能独立完成一个功能，解释设计取舍，并且改需求时不把代码改乱。 拿一个“职位收藏管理页”练 React 和 TS：展示职位、搜索筛选、收藏、编辑备注、请求后端。围绕同一个项目反复升级，比连续跟着教程做几个项目更能练熟。 第一层：看到页面，知道组件和状态怎么拆 比如页面有搜索框、筛选栏、职位列表和编辑弹窗。 你要能判断： 搜索词和筛选条件放在哪个组件？ 列表和弹窗都需要当前职位时，由谁持有它？ 哪些数据需要存进 state，哪些可以直接计算？ 具体来说，职位列表和搜索词是状态，“搜索后的职位列表”通常直接算出来，不需要额外存一份，也不需要用 useEffect 同步。 练习方法：先自己画组件树，标出每份状态的拥有者，再写代码。做完后增加一个需求，比如“筛选结果数量同时显示在顶部”，检查现有结构是否容易调整。 第二层：让 TS 表达业务规则，而不是只消除红线 例如职位申请状态只能是“未投递、已投递、面试中、已结束”，就用联合类型限定，而不是随便写 string。 请求状态也可以这样表达： type LoadState = | { status: 'loading' } | { status: 'success'; jobs: Job[] } | { status: 'error'; message: string }; 这样判断 status 为 success 后，TS 才允许你直接访问 jobs。比同时维护 loading、error、data 三份可能互相矛盾的状态更清楚。 要练熟的重点是类型推断、对象类型、联合类型、类型收窄、组件 props，以及事件和 Hook 的类型。泛型先学会读懂和使用，再练写简单的泛型函数，不急着钻类型体操。 遇到报错，先问“这里实际可能是什么值”，别第一反应加 any 或 as。 第三层：把异步和交互边界做完整 “成功显示数据”只是第一步，还要处理： 加载中、请求失败、空列表。 连续搜索时，旧请求晚返回，不能覆盖新结果。 提交期间避免重复提交。 编辑取消后，下次打开弹窗该显示什么。 组件卸载或依赖变化时，副作用如何清理。 这些问题最能暴露你对闭包、依赖、状态快照和组件生命周期的理解。 尤其记住：点击收藏对应的业务操作，通常直接写在事件处理函数里；不要先改一个“需要收藏”的状态，再靠 effect 监听它发请求。effect 主要用于与外部系统同步。 第四层：练修改和排错，而不只是从零生成 给已经写好的项目不断改需求： 单选筛选改成多选。 本地收藏改成服务器保存。 筛选条件需要写进 URL，刷新后保留。 职位列表新增不同类型的职位，不同类型显示不同字段。 每次改完，检查有没有重复状态、到处透传的 props、随意的类型断言，以及过度复杂的 effect。 遇到 bug，先复现，再定位是哪一层的问题：数据、状态、渲染还是请求。结合浏览器 Network、断点和 React DevTools 查，不要只靠随机改依赖数组。 怎么判断自己已经熟练？ 不用照着教程，能从需求独立拆组件、设计类型、接接口；能处理异常交互；能解释为什么某个值放 state、为什么某处不需要 effect；新增需求时不必推倒重写。达到这些，比“学过多少 Hook”更有意义。 AI 可以帮你审查设计、解释类型报错、补边界测试，但先自己完成核心实现。让它指出问题后，你自己改，再解释改动原因，别停留在“它生成，我点运行”。 对应的官方材料： React 的组件和状态设计： https://react.dev/learn/thinking-in-react React 配合 TypeScript： https://react.dev/learn/typescript