React

响应式、可组合的界面

React 是构建用户界面的首选库。组件、JSX、状态与 Hook，然后是数据处理、性能和架构：从你的第一个组件一直到专家级模式。

基础

入门 - 一步步打好基础

• 为什么用 React、你的第一个组件与 JSX了解 React 是什么，编写你的第一个组件，并学习 JSX 的基本规则。
• Props：向组件传递数据学习如何通过 props 向组件传递数据，让你的组件变得可复用。
• 用 useState 管理本地状态用 useState 给你的组件赋予记忆，从而显示那些随用户交互而变化的值。
• 事件与条件渲染对用户操作作出响应，并根据条件显示或隐藏元素。
• 渲染列表与 key 的作用用 map 把一个数据数组转换成屏幕上的一组元素，并用 key 标识每个元素。

进阶

中级 - 构建真实项目

• 受控表单学习通过 React 状态驱动每一个表单字段，从而校验并提交可靠的数据。
• useEffect：副作用、依赖与清理使用 useEffect 让你的组件与外部世界同步，掌握依赖项与清理。
• 状态提升与数据共享把每一份状态放在最近的公共祖先中，从而在多个组件之间共享数据而不重复它。
• 组合：children 与拆分组件利用 children 属性构建可复用的容器组件，并把你的界面拆分成职责清晰的部分。
• 调用 API：fetch、加载与错误在副作用中用 fetch 加载远程数据，并干净利落地对加载状态和错误状态进行建模。

精通

熟练 - 高级模式与性能优化

• 用 useReducer 管理复杂状态用一个纯粹的 reducer 来组织复杂状态，集中管理状态转换并排除不可能出现的组合。
• Context：无需逐层传递即可共享用 context 传递数据而无需 prop drilling，同时把它的重新渲染和局限性控制在手中。
• 自定义 hook：抽取并复用逻辑把带状态的逻辑抽取成可复用、可组合、可测试的 hook。
• 记忆化：memo、useMemo、useCallback搞清楚 React.memo、useMemo 和 useCallback 什么时候真正让你的应用变快，什么时候只是白白让它变复杂。
• useRef 与 DOM 操作用 useRef 操作 DOM 并保存实例值，同时不破坏渲染的纯粹性。

大师

专家 - 架构、底层原理与边界情况

• 深入底层：协调、批处理、并发渲染了解 Fiber 如何协调组件树、批处理更新，并让渲染工作变得可中断。
• Suspense、lazy 与代码分割掌握挂起机制、组件的懒加载以及打包产物的分割。
• 专家模式：复合组件、控制反转用复合组件、状态归约器，以及在 render props 与 hooks 之间的正确取舍，来设计灵活的组件 API。
• 现代 React：Server Components、use、useTransition、useOptimistic探索服务器组件、用 use 读取 Promise，以及 React 19 的乐观更新。
• 质量：Testing Library、StrictMode、Profiler测试行为而非实现，善用 StrictMode 的双重调用，并用 Profiler 测量渲染。