一、React 基础入门

• 掌握 使用 JSX 编写标签语法，理解 JSX 与 HTML 的差异（如闭合标签、className 替代 class）

• 掌握 创建和嵌套 React 组件，使用函数式组件声明 UI 片段

• 掌握 在 JSX 中嵌入 JavaScript 表达式，使用大括号 {} 插入变量或表达式

• 掌握 为组件添加 props 并传递数据，实现父子组件通信

• 理解 组件的可复用性与组合性，将 UI 拆分为独立、可嵌套的组件

• 了解 React 的模块化机制，通过 import 和 export 管理组件文件

二、UI 渲染与条件控制

• 掌握 条件渲染：使用 if、三元运算符 ? : 和逻辑 && 控制内容显示

• 掌握 列表渲染：使用 .map() 方法遍历数组生成 JSX 元素列表

• 掌握 为列表元素设置唯一 key 属性，理解 key 在 diff 算法中的作用

• 理解 如何在列表中动态绑定样式和事件

• 理解 数据驱动视图的理念，避免直接操作 DOM

• 了解 如何将 HTML 转换为 JSX，使用在线工具辅助迁移

三、组件状态与交互

• 掌握 使用 useState Hook 管理组件状态，声明状态变量及其更新函数

• 掌握 响应用户事件（如 onClick、onChange），定义事件处理函数

• 掌握 状态更新的异步特性，理解“state 是快照”的行为

• 掌握 使用函数式更新（如 setCount(c => c + 1)）处理多个状态更新队列

• 理解 状态提升（Lifting State Up），将共享状态移到共同父组件中

• 理解 受控组件的概念，在表单中使用 state 同步输入值

• 了解 如何通过 key 强制重置组件状态，用于切换时清除输入内容

四、状态结构与进阶管理

• 掌握 避免冗余状态，从 props 或 state 计算派生值（如 fullName = firstName + lastName）

• 掌握 使用 useReducer 集中管理复杂状态逻辑，分离 action 与 reducer 函数

• 掌握 使用 Context API 跨层级传递数据，避免 props 逐层透传

• 掌握 结合 useReducer 与 Context 构建全局状态管理方案

• 理解 状态不可变性原则，使用展开语法 ... 更新对象和数组类型的状态

• 了解 使用 Immer 等库简化不可变更新代码

五、组件设计与最佳实践

• 掌握 编写纯粹的 React 组件，确保相同输入始终返回相同输出

• 理解 React 渲染树与模块依赖树的概念，分析组件层级与性能影响

• 理解 组件的生命周期与渲染过程：触发 → 渲染 → 提交

• 了解 如何使用 React Developer Tools 调试组件结构与状态

• 了解 TypeScript 在 React 中的基本应用，为 props 和 state 添加类型注解