React知识框架

 一、核心概念

1. 组件化开发

• 核心思想：将 UI 拆分为独立、可复用的组件（函数组件/类组件）。
• 组件特性：props（接收参数）、state（组件状态）、生命周期（类组件特有）。

2、虚拟 DOM

用 JS 对象模拟真实 DOM，通过 Diff 算法对比更新，减少实际 DOM 操作，提升性能。

3、单向数据流

数据从父组件通过 props 流向子组件，子组件通过回调函数向父组件传递数据。

二、关键特性

1. 状态管理

• useState（函数组件）：管理组件内部状态。
• useEffect：处理副作用（如异步请求、DOM 操作）。
• 复杂场景：Redux、Recoil、 Zustand 等状态管理库。、

2、组件通信

• 父子组件：props / 回调函数。
• 跨组件：Context API（避免多层嵌套传参）、状态管理库。
• 兄弟组件：通过共同父组件通信。

3、Hook 机制

• 常用 Hook： useState 、 useEffect 、 useContext 、 useRef 、 useCallback 、 useMemo 。
• 自定义 Hook：复用组件逻辑（如数据请求逻辑）。

三、开发流程与工具

1、创建项目

使用  create-react-app  或 Vite 快速搭建项目。

2、路由管理

React Router（配置前端路由，实现单页应用）。

3、状态与副作用

• 异步请求：Axios / Fetch API，配合  useEffect  或 SWR / React Query 优化。
• 表单处理：受控组件（通过  useState  管理表单状态）。

4、构建与部署

• 打包工具：Webpack（ CRA 内置）、Vite。
•  部署：静态服务器（如 Netlify、Vercel）、服务器渲染（Next.js）。

四、高级主题

1、性能优化

• 避免不必要的重新渲染： useMemo （缓存计算值）、 useCallback （缓存函数）、 React.memo （ memoize 组件）。
• 虚拟列表：处理大数据量渲染（如 react-window）。

2、服务器端渲染（SSR）

框架：Next.js（支持 SSR、静态站点生成（SSG）、API 路由）。

 3、TypeScript 支持

类型定义：React 内置类型声明，提升代码健壮性。

4、测试

库：Jest（单元测试）、React Testing Library（组件测试）。 

五、生态与周边

• UI 库：Ant Design、Material-UI、Chakra UI。
• 状态管理：Redux Toolkit、Jotai、Pinia（Vue 生态类似库，可类比理解）。
• 跨平台开发：React Native（开发移动端应用）。
• 构建工具：Babel（转译 JSX）、ESLint（代码规范检查）。