标签归档：react

带着问题学React，从入门到精通

入门阶段：React基础

知识点：

典型问题：

  • React 中的虚拟 DOM 有什么作用？
  • props 和 state 有什么区别？
  • 为什么要用 key 渲染列表？
  • setState 是同步的吗？

常用库

  • React(核心库)
  • ReactDOM(Web 渲染器)

进阶阶段：组件开发与状态管理

知识点

  • 组件通信（props、Context、回调函数）
  • useState、useEffect等 Hooks使用
  • 自定义 Hook
  • 组件生命周期（类组件 vs 函数组件 Hooks）
  • 状态提升
  • Context API
  • 条件渲染优化、memo、useMemo、useCallback

典型问题

  • useEffect 的依赖项该怎么写？
  • 如何避免组件重复渲染？
  • useRef 有哪些实际用途？

常用库

  • Zustand（轻量状态管理）
  • Redux Tookit（大型项目状态管理）
  • React Router（页面路由管理）

高级阶段：构建项目与工程化

知识点

  • 路由配置与懒加载
  • 动态组件、代码拆分（Code Splitting）
  • 表单库（如 React Hook Form）
  • 表格处理、分页、搜索
  • 文件上传与下载
  • 响应式布局、UI框架使用
  • 第三方库封装（如 echarts、地图等）

典型问题

  • 如何拆分组件模块？
  • 如何封装通用组件？
  • 表单验证怎么做？
  • 样式模块化（CSS Modules、Sass、Tailwind）

常用库

  • React Router Dom
  • Axios（请求库）
  • React Hook Form / Formik（表单库）
  • Tailwind CSS / Ant Design / Material UI （UI 框架）
  • Framer Motion （动画库）

精通阶段：性能优化与全链路开发

知识点

  • SSR (Next.js)、静态站点生成（SSG）
  • 状态缓存（SWR、React Query）
  • 性能优化技巧（懒加载、虚拟列表、节流防抖）
  • 单元测试（Jest、Testing Library）
  • TS + React 开发模式
  • SEO 与可访问性优化 （a11y）

典型问题

  • 什么时候使用 SSR，什么时候使用 CSR？
  • useMemo 为什么有时不优化反而变慢？
  • 如何处理大数据渲染卡顿？

常用库

  • Next.js（React 框架， 支持 SSR）
  • React Query / SWR（请求与缓存管理）
  • Vite / Webpack（打包工具）
  • Typescript（类型增强）
  • Jest + @testing-library/react（测试库）

项目脚手架与常用开发库

框架搭建常用工具

  • Create React App（入门，推荐做练习）
  • Vite + React（更快的构建，推荐）
  • Next.js（支持 SSR，适合中大型项目）

开发必备库

  • ESLint + Prettier（代码规范）
  • Husky + lint-staged（Git Hook质量保障）
  • Axios（网络请求）
  • dayjs（时间处理）
  • lodash（工具库）

实践建议

项目练手方向（逐步复杂）

  • 待办清单（TodoList）
  • 天气查询小程序（API请求）
  • 表单验证系统（表单库）
  • 简单后台管理系统（路由 + 权限）
  • 小型博客系统（支持编辑发布）
  • 电商购物车（Redux + 接口 + UI）
  • 搭建个人博客 / 作品集（Next.js + Markdown）
Page 1 of 3
1 2 3