一口三个馍

Appearance

React 生态 ​

React 以其组件化架构和强大的生态系统，成为现代前端开发的主流框架。

React 基础 ​

核心概念 ​

  • 组件: 函数组件、类组件、JSX语法
  • Props: 属性传递、默认值、类型检查
  • State: 状态管理、setState、状态提升
  • 生命周期: 挂载、更新、卸载、错误边界

React 18 新特性 ​

  • 并发渲染: Concurrent Mode、Suspense
  • 自动批处理: 状态更新批处理
  • 新的Root API: createRoot、hydrateRoot
  • Suspense: 数据获取、代码分割

Hooks ​

基础Hooks ​

  • useState: 状态管理、初始值
  • useEffect: 副作用、副作用清理
  • useContext: 上下文消费、Provider模式
  • useReducer: 复杂状态、状态机

额外Hooks ​

  • useCallback: 函数记忆化、依赖优化
  • useMemo: 值记忆化、计算优化
  • useRef: DOM引用、可变引用
  • useImperativeHandle: 命令式API暴露

自定义Hooks ​

  • 逻辑复用: 自定义hooks、组合逻辑
  • 状态抽象: 业务逻辑封装
  • 副作用管理: 异步操作、事件处理

状态管理 ​

Context API ​

  • 创建上下文: createContext、Provider
  • 消费上下文: useContext、Consumer
  • 性能优化: memo、useMemo

Redux ​

  • 状态树: store、action、reducer
  • 中间件: redux-thunk、redux-saga
  • 选择器: reselect、状态计算
  • DevTools: 调试工具、时间旅行

Redux Toolkit ​

  • 简化Redux: configureStore、createSlice
  • Immer: 不可变更新、简化语法
  • RTK Query: 数据获取、缓存管理

Zustand ​

  • 轻量级: 小而美、简单API
  • TypeScript: 类型安全、开发体验
  • 中间件: 持久化、撤销重做

路由管理 ​

React Router ​

  • 路由配置: BrowserRouter、HashRouter
  • 路由定义: Route、Routes、嵌套路由
  • 导航: Link、NavLink、useNavigate
  • 参数: useParams、useSearchParams

路由守卫 ​

  • 保护路由: 认证检查、重定向
  • 懒加载: React.lazy、Suspense
  • 代码分割: 路由级分割

样式管理 ​

CSS in JS ​

  • styled-components: 样式组件、主题
  • emotion: CSS-in-JS、样式对象
  • styled-system: 设计系统、主题化

CSS Modules ​

  • 局部作用域: 样式隔离、类名生成
  • 组合样式: composes、样式继承
  • TypeScript: 类型定义

Tailwind CSS ​

  • 原子化CSS: 工具类、响应式设计
  • 自定义配置: 主题定制、插件系统
  • 优化: PurgeCSS、压缩

表单处理 ​

受控组件 ​

  • 状态同步: value、onChange
  • 表单验证: 实时验证、错误显示
  • 提交处理: preventDefault、表单数据

React Hook Form ​

  • 高性能: 最小重渲染、非受控组件
  • 验证: 内置验证、自定义规则
  • 集成: UI库集成、TypeScript

Formik ​

  • 表单状态: values、errors、touched
  • 处理函数: handleChange、handleSubmit
  • 高级功能: 数组字段、嵌套表单

数据获取 ​

Fetch API ​

  • 原生API: fetch、Response、Request
  • 错误处理: try/catch、状态检查
  • 配置: headers、credentials、mode

Axios ​

  • HTTP客户端: 请求配置、拦截器
  • 实例: 基础URL、默认配置
  • 取消请求: CancelToken、AbortController

React Query ​

  • 服务端状态: 缓存、同步、更新
  • 查询: useQuery、查询键
  • 变更: useMutation、乐观更新

性能优化 ​

渲染优化 ​

  • React.memo: 组件记忆化
  • useMemo: 计算结果缓存
  • useCallback: 函数引用稳定

代码分割 ​

  • 动态导入: React.lazy、import()
  • 路由分割: 按路由分割
  • 组件分割: 按组件分割

虚拟化 ​

  • 长列表: react-window、react-virtualized
  • 大数据: 虚拟滚动、窗口渲染

测试 ​

单元测试 ​

  • Jest: 测试运行器、断言库
  • React Testing Library: 行为测试、用户视角
  • 测试工具: render、fireEvent、waitFor

集成测试 ​

  • 组件测试: 完整组件、交互测试
  • 自定义hooks: hooks测试、状态变化
  • 上下文测试: Provider测试、消费测试

E2E测试 ​

  • Cypress: 端到端测试、实时重载
  • Playwright: 跨浏览器、多环境
  • Testing Library: 一致的测试API

服务端渲染 ​

Next.js ​

  • 页面路由: pages目录、动态路由
  • 数据获取: getServerSideProps、getStaticProps
  • API路由: api目录、服务端API
  • 优化: 图片优化、字体优化

SSR优化 ​

  • 流式渲染: 渐进式加载
  • 缓存策略: ISR、静态生成
  • 性能监控: Web Vitals、Core Web Vitals

移动端开发 ​

React Native ​

  • 跨平台: iOS/Android、原生性能
  • 组件: View、Text、TouchableOpacity
  • 导航: React Navigation、状态管理
  • 原生模块: 桥接、原生功能

Expo ​

  • 开发工具: CLI、SDK、构建服务
  • 托管服务: EAS Build、EAS Update
  • 库生态: Expo SDK、第三方库

TypeScript 集成 ​

类型定义 ​

  • 组件类型: FC、Props、JSX.Element
  • Hooks类型: useState、useEffect
  • 事件类型: React.MouseEvent、React.FormEvent

最佳实践 ​

  • 严格模式: strict、noImplicitAny
  • 类型守卫: typeof、instanceof
  • 泛型: 组件泛型、hooks泛型

生态工具 ​

开发工具 ​

  • React DevTools: 组件树、性能分析
  • ESLint: 代码规范、React规则
  • Prettier: 代码格式化

辅助库 ​

  • Lodash: 工具函数、性能优化
  • Moment.js: 日期处理、格式化
  • UUID: 唯一标识符生成

企业级应用 ​

项目结构 ​

  • 目录组织: components、pages、hooks、utils
  • 代码规范: ESLint、Prettier、husky
  • 提交规范: Commitizen、commitlint

部署策略 ​

  • 静态部署: Vercel、Netlify
  • 容器部署: Docker、Kubernetes
  • CDN优化: 资源分发、缓存策略

微前端 ​

架构模式 ​

  • 应用拆分: 独立部署、团队自治
  • 路由分发: 路由劫持、主应用路由
  • 应用通信: 事件总线、状态共享

实现方案 ​

  • single-spa: 微前端框架、生命周期
  • qiankun: 基于single-spa、开箱即用
  • Module Federation: Webpack 5、运行时加载

最佳实践 ​

代码组织 ​

  • 组件设计: 组合优于继承、单一职责
  • 状态管理: 状态提升、状态下钻
  • 错误处理: Error Boundary、错误恢复

性能监控 ​

  • 指标收集: 加载时间、交互时间
  • 错误监控: Sentry、错误边界
  • 用户体验: Core Web Vitals、性能预算