React 实战

JSX 不是模板语言而是 JS 的语法糖，理解它编译成 React.createElement 的本质；组件是函数、接收 props 返回 UI，单一职责与组合优于继承。

区分 props（父传子、只读）与 state（组件内部可变状态）；状态提升让兄弟组件共享数据；受控与非受控组件的区别与取舍。

React 合成事件机制、事件绑定的几种写法与 this 陷阱、受控表单的批量处理、多字段表单的状态组织方式。

React 条件渲染的几种写法（&&、三目、early return），列表用 map 渲染，key 的作用与"为什么别用 index"，以及列表性能与稳定性的真相。

Hooks 让函数组件拥有状态与副作用。useState 的用法与惰性初始化，useEffect 的执行时机与依赖数组，清理函数避免内存泄漏，以及"依赖数组"最容易踩的坑。

useMemo 缓存计算结果、useCallback 缓存函数、useRef 持有可变引用且不触发重渲染、useContext 跨组件传值。讲清每个 Hook 的适用场景与误用代价。

自定义 Hook 是 React 逻辑复用的正统方式：把状态逻辑抽成以 use 开头的函数，组件间共享行为而非复制代码。用一个 useFetch 实战讲透封装与返回约定。

React 状态管理的分层选型：局部用 useState、跨层用 useContext、全局用 Zustand/Redux。讲清什么时候不该上状态库，以及 useReducer 在复杂状态机场景的价值。

React 性能优化原则：先测量再优化。React.memo / useMemo / useCallback 的适用边界，长列表用虚拟列表，代码分割与懒加载（React.lazy + Suspense），以及常见反模式。

React Router 的声明式路由与动态参数，客户端数据请求的两种范式：自己用 useEffect+fetch，或用 SWR/React Query 获得缓存、重试、焦点刷新等能力。

真实项目里 React 最常见的坑与对策：key 错用、useEffect 竞态、无限重渲染、状态不该放 state、过度使用 Context、StrictMode 双调用困惑，以及一份可落地的工程检查清单。