一、核心概念

1. 组件化开发

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

2、虚拟 DOM

（1）什么是虚拟DOM?

Virtual DOM是一种编程概念。通俗点理解，虚拟DOM是一颗虚拟的JavaScript对象树，画重点，”虚拟的“、”JS对象“，指的是它把真实的网页文档节点，虚拟成一个个的js对象，并以树型结构，保存在内存中。

（2）React虚拟DOM的实现原理。

React虚拟DOM的实现原理，通过JS模拟网页文档节点，生成JS对象树(虚拟DOM)，然后再进一步生成真实的DOM树，再绘制到屏幕。如果后面有内容发生改变，React会重新生成一棵全新的虚拟DOM树，再与前面的虚拟DOM树进行比对diff，把差异的部分打包成patch，再应用到真实DOM，然后渲染到屏幕浏览器。

（3）Virtual DOM具体步骤可具体表现为：

• 构建虚拟DOM
• 通过虚拟DOM构建真正的DOM
• 内容更改，生成新的虚拟DOM
• 比较1和3两棵虚拟DOM树，得到patch
• 把patch应用到真正的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（代码规范检查）。