【前端】【面试】【知识点总结】react知识点大纲

基础部分

1. React 简介

• React 的定义与核心概念（声明式、组件化、单向数据流）
• React 的应用场景与优势
• React 的发展历程与生态系统

2. 环境搭建

• 使用 Create React App 快速搭建项目
• 手动配置 Webpack、Babel 等构建工具
• 开发环境和生产环境的配置差异

3. JSX

• JSX 的基本语法和规则
• JSX 与 HTML 的区别
• 在 JSX 中嵌入表达式

4. 组件

• 函数组件和类组件的定义与使用
• 组件的嵌套与组合
• 组件的 props 和 state
  • props 的传递与验证
  • state 的初始化与更新
  • 无状态组件和有状态组件的区别

5. 事件处理

• React 事件系统的特点
• 常见事件的绑定与处理（如 onClick、onChange 等）
• 事件对象的使用

6. 条件渲染

• 使用 if-else、三元运算符、逻辑与运算符进行条件渲染
• 列表渲染（使用 map 方法）
• 处理空列表和加载状态

7. 表单处理

• 受控组件和非受控组件的概念
• 表单元素（input、textarea、select 等）的使用
• 表单的提交与验证

进阶部分

1. 生命周期方法（类组件）

• 挂载阶段（componentWillMount、render、componentDidMount）
• 更新阶段（componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate）
• 卸载阶段（componentWillUnmount）
• 生命周期方法的使用场景和注意事项

2. Hooks

• useState：状态管理钩子
• useEffect：副作用钩子（数据获取、订阅、DOM 操作等）
• useContext：上下文钩子
• useReducer：复杂状态管理钩子
• useCallback 和 useMemo：性能优化钩子
• 自定义 Hooks 的创建与使用

3. React Router

• 路由的基本概念和原理
• React Router 的安装与配置
• 路由的匹配规则和导航
• 嵌套路由和路由参数的使用
• 路由守卫和懒加载

4. 状态管理

• 局部状态管理（使用 useState 和 useReducer）
• 全局状态管理（Redux、MobX、Recoil 等）
  • Redux 的核心概念（action、reducer、store）
  • Redux 的工作流程和中间件（如 Redux Thunk、Redux Saga）
  • React-Redux 的使用

5. 样式处理

• 内联样式的使用
• CSS 模块的引入与配置
• styled-components 等 CSS-in-JS 库的使用

6. 错误处理

• 错误边界（Error Boundaries）的概念和使用
• 全局错误处理的实现

高级部分

1. React 性能优化

• 虚拟 DOM 的原理和优势
• shouldComponentUpdate、React.memo、useMemo 和 useCallback 的性能优化作用
• 代码分割和懒加载的实现
• 性能分析工具（如 React DevTools 的 Profiler）的使用

2. 高阶组件（HOC）

• 高阶组件的定义和用途
• 高阶组件的实现方式（属性代理、反向继承）
• 高阶组件的应用场景（代码复用、状态管理、性能优化等）

3. 渲染优化

• React.memo 和 PureComponent 的使用
• React.lazy 和 Suspense 的异步渲染
• 服务器端渲染（SSR）和静态站点生成（SSG）
  • Next.js 等 SSR 框架的使用

4. 测试

• 单元测试（使用 Jest、React Testing Library 等工具）
• 集成测试和端到端测试（使用 Cypress、Playwright 等工具）
• 测试策略和最佳实践

5. React 生态系统

• React Native：跨平台移动应用开发
• React Query：数据获取和缓存库
• React Hook Form：表单管理库
• Framer Motion：动画库

项目实践

1. 小型项目实战

• 搭建一个简单的待办事项应用
• 实现一个博客列表页面

2. 大型项目架构设计

• 项目的目录结构和模块划分
• 状态管理和路由设计
• 代码规范和团队协作