Skip to main content

React 知识目录

1. React 基础​

1.1 React 简介​

1.2 JSX 语法​

1.3 组件与 Props​

1.4 状态与 State​

1.5 事件处理​

1.6 条件渲染​

1.7 列表与 Key​

1.8 表单处理​

1.9 组件通信（父子、兄弟、跨层级）​

1.10 React 组件类型：函数组件 vs 类组件​

2. React 高级特性​

2.1 组件生命周期（类组件）​

2.2 Hooks 基础​

  • useState
  • useEffect
  • useContext
  • useReducer
  • useRef
  • useMemo 与 useCallback

2.3 自定义 Hooks​

2.4 高阶组件（HOC）​

2.5 Render Props​

2.6 错误边界（Error Boundaries）​

2.7 Portals​

2.8 代码分割与懒加载（React.lazy 和 Suspense）​

3. 状态管理​

3.1 React 状态管理基础​

3.2 Context API​

3.3 Redux 基础​

  • Action、Reducer、Store
  • 使用 react-redux
  • Redux Toolkit

3.4 MobX​

3.5 Recoil​

3.6 Zustand​

3.7 状态管理工具对比与选型​

4. 路由与导航​

4.1 React Router 基础​

  • <BrowserRouter> 和 <HashRouter>
  • <Route>、<Switch> 和 <Redirect>
  • 嵌套路由

4.2 React Router Hooks​

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

4.3 动态路由与代码分割​

4.4 路由守卫与权限控制​

5. 性能优化​

5.1 React 渲染机制与虚拟 DOM​

5.2 避免不必要的渲染​

5.3 代码分割与懒加载​

5.4 性能分析工具​

  • React DevTools
  • Lighthouse
  • Chrome Performance Tab

5.5 优化长列表渲染​

  • 虚拟列表（React Window 或 React Virtualized）

5.6 Web Vitals 与性能监控​

6. 测试​

6.1 单元测试​

  • Jest
  • React Testing Library

6.2 组件测试​

6.3 快照测试​

6.4 端到端测试​

  • Cypress
  • Puppeteer

6.5 测试覆盖率与持续集成​

7. 工程化与工具​

7.1 项目初始化​

  • Create React App
  • Vite

7.2 构建工具​

  • Webpack
  • Babel

7.3 代码格式化与 linting​

  • ESLint
  • Prettier

7.4 样式管理​

  • CSS Modules
  • Styled Components
  • Tailwind CSS

7.5 环境变量与多环境配置​

7.6 部署与 CI/CD​

  • GitHub Actions
  • Netlify
  • Vercel

8. React 生态​

8.1 UI 组件库​

  • Material-UI
  • Ant Design
  • Chakra UI

8.2 数据请求​

  • Axios
  • SWR
  • React Query

8.3 动画库​

  • React Spring
  • Framer Motion

8.4 表单管理​

  • Formik
  • React Hook Form

8.5 国际化（i18n）​

  • react-i18next

9. 进阶主题​

9.1 TypeScript 与 React​

9.2 服务端渲染（SSR）​

  • Next.js

9.3 静态站点生成（SSG）​

9.4 微前端架构​

9.5 WebAssembly 与 React​

9.6 React 与 Web3​

9.7 React Native 基础​

10. 最佳实践与设计模式​

10.1 组件设计原则​

  • 单一职责
  • 可复用性

10.2 状态管理最佳实践​

10.3 性能优化最佳实践​

10.4 代码组织与架构设计​

10.5 常见设计模式​

  • 容器与展示组件
  • 高阶组件（HOC）
  • 渲染属性（Render Props）

11. 资源与社区​

11.1 官方文档与教程​

11.2 优质博客与文章​

11.3 开源项目与源码阅读​

组件

Q：组件拆分原则是啥？​

  • A：把相关联的东西放一起（按功能、业务）
    • 横向（按业务、功能模块划分）
    • 纵向（应用、系统层级划分）

状态管理

Q：使用场景？​

  • A：
    • 从前后端交互角度看
      • 要维护大量与服务器交互的数据
    • 从组件角度看
      • 某个组件状态要多个组件内共享
      • 某个状态需要在任何地方都可以拿到
      • 一个组件需要改变全局状态

      • 一个组件需要改变另一个组件的状态​

0%