第95课：自定义 Hooks 设计模式——封装复用逻辑、命名规范、useLocalStorage、useDebounce 实战React Hooks 的核心价值在于逻辑复用。内置的 useState、useEffect、useRef 等提供了原子能力，而自定义 Hook 让你将这些原子能力组合成可复用的逻辑单元。自定义 Hook 本质上是一个以 use 开头、内部可以调用其他 Hooks 的 JavaScript 函数。它不共享状态，而是共享状态逻辑——每次调用自定义 Hook 都会创建完全独立的状态实例。本节课将深入讲解自定义 Hook 的设计原则、命名规范、如何从组件中提取逻辑、以及...
第94课：useReducer 与状态逻辑抽离——Reducer 模式、与 Redux 的关系、复杂表单状态管理当组件状态逻辑变得复杂——例如包含多个子值需要协调更新、下一次状态依赖上一次状态、或者状态转换涉及多种操作类型——useState 的简单“设置值”模式会变得难以维护。React 提供了 useReducer Hook，它将状态更新逻辑从组件中抽离到一个独立的纯函数（Reducer）中，通过派发 Action 来描述“发生了什么”，由 Reducer 统一决定“状态如何变化”。这种模式与 Redux 的核心思想一脉相承，但在组件级别轻量得多。理解 Reducer 模式不仅能帮助...
第93课：性能优化：memo、useMemo、useCallback——记忆化原理、引用相等、正确使用场景React 的渲染模型默认是“自上而下，全量渲染”：当组件的 State 或 Props 变化时，该组件及其所有子组件都会重新渲染。对于小型应用，这完全不是问题；但对于包含大量组件树、昂贵计算或频繁更新的中型到大型应用，不必要的渲染会逐渐侵蚀性能。React 提供了三个核心的 记忆化（Memoization） API 来优化渲染性能：**React.memo** 用于跳过纯展示组件的重渲染；**useMemo** 用于缓存昂贵的计算结果；**useCallback** 用于稳定函数引...
第92课：useRef 与 DOM 操作——ref 对象、forwardRef、useImperativeHandle在 React 的声明式编程模型中，绝大多数场景下你不需要直接操作 DOM——React 通过 State 和 Props 自动保持 UI 与数据同步。但总有例外：聚焦输入框、测量元素尺寸、与第三方非 React 库集成、存储不参与渲染的变量……这些场景需要一个脱离 React 渲染周期的逃生舱。useRef 就是这个逃生舱。它创建的是一个普通的 JavaScript 对象，其 current 属性可以在组件的整个生命周期中持续存在，且修改 current 不会触发重新渲...
第91课：副作用与 useEffect——依赖数组、清理函数、与生命周期对应关系、闭包陷阱React 组件的主要职责是渲染 UI——根据 Props 和 State 计算并返回 React 元素。但真实世界的应用还需要与外部系统交互：发起网络请求、订阅数据源、操作 DOM、设置定时器。这些操作被称为副作用（Side Effects），因为它们会影响组件之外的世界，且在 React 的纯渲染流程之外执行。useEffect 是函数组件中管理副作用的统一入口——它涵盖了类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmou...
第90课：事件处理与合成事件——事件绑定、传参、阻止默认、React 事件系统React 的事件处理系统被称为合成事件（SyntheticEvent）。它并非将事件处理函数直接绑定到真实 DOM 节点上，而是通过事件委托机制在根节点统一监听，并将原生 DOM 事件包装为跨浏览器兼容的合成事件对象。这种设计不仅消除了浏览器之间的不一致性，还通过事件池（React 17 之前）或持久化事件（React 17+）优化了性能。理解 React 事件与原生 DOM 事件的差异、this 绑定的演变（类组件 vs 函数组件）、以及如何正确传参、阻止默认行为与冒泡，是构建可交互 React 应用的基础...
第89课：State 与 useState——状态更新、批处理、不可变性、函数式更新State（状态）是 React 组件内部可变的私有数据。与只读的 Props 不同，State 属于组件自身，可以随时间变化，驱动 UI 的重新渲染。在函数组件中，useState 是管理 State 的入口 Hook——它返回一个状态变量和一个更新函数，让你在保持 React 的渲染规则（不可变性、异步批处理）的同时，以声明式的方式更新 UI。理解 State 的不可变性、异步批处理机制以及函数式更新的正确使用场景，是写出无 Bug、高性能 React 组件的关键。
1. useState 的基本用...
第88课：函数组件与 Props——组件定义、Props 只读、children、组合React 应用由组件构成。组件是独立的、可复用的 UI 片段，接收输入数据（称为 Props），返回描述界面外观的 React 元素。在 React 的现代版本中，函数组件是定义组件的推荐方式——它简洁、易于测试，并且与 Hooks 深度集成。理解 Props 的只读性、单向数据流以及如何通过 children 和组合模式构建灵活的可复用组件，是掌握 React 组件化开发的核心。
1. 函数组件：最简单的组件形式函数组件就是一个接收 Props 对象作为参数、返回 React 元素的 JavaSc...
第87课：React 元素与 JSX——createElement、JSX 转换、虚拟 DOM、Fiber 架构简介React 的核心哲学是声明式 UI：你描述界面应该是什么样子，React 负责高效地更新 DOM 以匹配你的描述。理解这一哲学的关键，在于理解 React 的元素、JSX 和虚拟 DOM 这三者的关系。JSX 是编写 React 元素最直观的语法，但它并非直接运行在浏览器中的代码——编译工具（如 Babel）会将 JSX 转换为 React.createElement（或 React 17+ 的 jsx 函数）调用，生成轻量的 JavaScript 对象——这就是虚拟 D...
第86课：前端测试基础——Jest、单元测试、组件测试、E2E 测试简介测试是保障软件质量和可维护性的基石。前端测试体系通常划分为三个层次：单元测试（验证函数、工具方法等最小可测试单元的正确性）、组件测试（验证 UI 组件在给定 Props 和状态下渲染及交互的正确性）、端到端测试（E2E）（模拟真实用户操作，验证整个应用流程在多页面、多系统间的完整性）。本节课将聚焦最流行的测试工具 Jest——一套零配置、快照测试、覆盖率报告集于一体的 JavaScript 测试框架——并分别演示单元测试、React/Vue 组件测试的编写方式，最后概述 E2E 测试工具（Cypress&#...
