尧图网站建设 
一、React简介React 是一个专注于构建用户界面UI的 JavaScript 库。它由 Meta原 Facebook团队在 2013 年开源。核心思想组件化Component-Based这是 React 的灵魂。它把复杂的页面拆分成一个个独立、可复用的小积木组件。声明式编程Declarative传统的开发是“命令式”的你需要一步步告诉浏览器怎么改网页。而 React 是“声明式”的你只需要描述“当数据是 X 时页面应该长 Y 样”。当数据变化时React 会自动帮你更新页面。虚拟 DOMVirtual DOM直接修改真实网页元素DOM是很耗费性能的。React 会在内存中维护一个轻量级的“虚拟 DOM”。当数据变化时它先在虚拟 DOM 上算出差异Diffing然后只把真正改变的那一小部分更新到真实网页上从而保证了极高的渲染性能。单向数据流Unidirectional Data Flow在 React 中数据就像水流一样只能从父组件通过 props 流向子组件。子组件不能直接修改父组件的数据只能通过回调函数通知父组件去改。二、React生态生态分类主流代表工具核心作用与通俗解释全栈/元框架Next.js, Remix提供开箱即用的服务端渲染SSR、路由等高级功能是企业级大型项目的首选框架。构建工具Vite, Webpack项目的“打包机”。Vite 是目前最火的构建工具启动和热更新速度极快大幅提升开发体验。状态管理Redux Toolkit, Zustand解决复杂的数据共享问题。当多个不相关的组件需要共享数据如购物车、用户信息时它们提供全局的数据仓库。路由管理React Router解决单页面应用SPA的页面跳转问题让你在不刷新浏览器的情况下实现多页面的切换效果。样式方案Tailwind CSS解决组件的样式编写和隔离问题。Tailwind 提供大量实用类让你不用离开 HTML 就能快速写出漂亮的样式。类型安全TypeScript给 JavaScript 加上类型系统。虽然学习曲线稍陡但能在你写代码时就提前发现很多低级错误是大型项目的标配。跨端开发React Native“一次学习随处编写”。让你能用写 React 的相同语法和思维直接开发出 iOS 和 Android 的原生手机 App。三、JSX 语法JSX 全称是 JavaScript XML。它看起来像 HTML但本质上是 JavaScript 的一种语法扩展语法糖。它允许你直接在 JS 文件里写类似 HTML 的标签把页面的“视图”和“逻辑”写在同一个地方。示例// 这是一个简单的 React 组件 function WelcomeCard() { // 1. 准备一些 JS 变量在实际开发中这些数据通常来自接口或状态 const userName 前端新手; const avatarUrl https://example.com/avatar.jpg; const isLoggedIn true; // 2. 准备一个样式对象注意JSX 中的内联样式必须是一个对象且属性名要用驼峰命名比如 fontSize const cardStyle { padding: 20px, backgroundColor: #f0f0f0, borderRadius: 8px, fontSize: 16px }; // 3. 返回 JSX 结构 return ( // 使用大括号 {} 引入 JS 变量作为样式 div style{cardStyle} {/* 使用大括号 {} 将 JS 变量嵌入到 HTML 标签中 */} h2你好{userName}/h2 {/* 动态绑定图片的 src 属性同样需要用大括号 {} */} img src{avatarUrl} alt用户头像 / {/* 使用三元运算符进行条件渲染如果登录了显示欢迎否则显示请登录 */} {isLoggedIn ? p欢迎回到你的工作台/p : p请先登录。/p} /div ); } export default WelcomeCard;2. 使用避坑指南标签必须闭合在 HTML 里img可以不用闭合但在 JSX 里必须写成img /或img/img。类名要用 className因为class是 JS 的保留字所以写 CSS 类名时要用classNamebox。只能有一个根元素一个组件返回的标签必须被一个父级包裹。如果你不想多加一个div可以使用空标签Fragment.../包裹起来。本质是语法糖你写的h1Hello/h1在底层会被编译器如 Babel转换成React.createElement(h1, null, Hello)这样的普通 JS 函数调用。四、虚拟DOM1. 虚拟 DOM 的作用提升性能减少真实 DOM 操作在浏览器中直接修改真实的 DOM 是非常昂贵的操作会触发浏览器的重排和重绘。虚拟 DOM 把修改操作转移到内存中的 JS 对象上计算完毕后只把真正改变的部分应用到真实 DOM 上从而避免了频繁触发浏览器渲染保证了页面的流畅。实现跨平台开发因为虚拟 DOM 只是普通的 JS 对象它并不绑定在浏览器环境。React 正是利用这一点通过 React Native 将虚拟 DOM 渲染成手机 App 的原生组件实现了“一次学习随处编写”。简化开发体验声明式编程有了虚拟 DOM开发者不再需要手动去写document.getElementById这种繁琐的代码。你只需要关心“数据变成了什么样”React 会自动帮你处理好底层的 DOM 更新逻辑。2. 虚拟 DOM工作流程构建虚拟 DOM 树当组件首次渲染或状态State/Props发生变化时React 会根据最新的 UI 结构在内存中生成一棵全新的虚拟 DOM 树。对比差异DiffingReact 会将这棵“新树”与上一次的“旧树”进行对比。通过一套高效的 Diff 算法精准找出两棵树之间的差异比如某个文本变了或者新增了某个节点。生成补丁Patching根据找出的差异React 会生成一个最小化的“更新清单”补丁明确知道真实 DOM 哪里需要修改。应用更新Reconciliation/协调最后React 拿着这份清单去修改真实的 DOM。没有发生变化的节点完全不动只更新真正改变的部分。3. Vue 和 React 的虚拟 DOM 对比Vue 和 React 都使用了虚拟 DOM但它们的底层设计哲学有很大区别。更新机制不同手动触发 vs 自动追踪React采用“状态驱动”。当你在 React 中调用 setState 或 useState 时React 会默认从当前组件开始重新渲染它以及它的所有子组件然后生成新的虚拟 DOM 树进行全量对比。因此React 往往需要开发者手动使用 React.memo 等 API 来避免不必要的重渲染。Vue采用“响应式系统”。Vue 会在底层自动追踪数据的变化依赖收集。当某个数据改变时Vue 能精准知道是哪个组件用到了这个数据从而只触发该组件的重新渲染。Vue 的更新粒度更细天生具备精准更新的优势。Diff 算法策略不同单向遍历 vs 双端对比React在处理同层级的列表节点时React 默认采用单向遍历。它从左到右依次对比新旧列表如果发现有节点移动比如把列表最后一项移到第一项React 可能会产生较多的 DOM 移动操作。Vue采用了更精细的双端对比策略头头、尾尾、头尾、尾头交叉对比并且在 Vue3 中引入了“最长递增子序列”算法。这使得 Vue 在处理复杂的列表排序、反转等场景时能以最小的 DOM 操作完成更新。优化手段不同纯运行时 vs 编译时优化React它的虚拟 DOM 是纯运行时的。每次更新时React 必须遍历整棵树去比较每个节点的属性哪怕这个节点是永远不会改变的静态内容。Vue采用了“带编译时信息的虚拟 DOM”。Vue 的模板编译器在打包阶段就会进行静态分析给不会变化的“静态节点”打上标记。在运行时 Diff 时Vue 会直接跳过这些静态节点只对比动态节点大大减少了计算量。四、React项目结构React 项目并没有强制要求的目录规范不同团队和项目规模会有差异。下面是以 Vite 创建项目后常见的目录结构其中src目录是日常开发的核心工作区my-react-app/ ├── public/ 静态资源目录不会被打包工具处理 │ ├── index.html 应用入口 HTML │ ├── favicon.ico 网站图标 │ └── robots.txt 搜索引擎爬虫规则 │ ├── src/ 源代码目录核心工作区99%的代码都在这里 │ ├── api/ 接口请求层或命名为 services │ │ ├── request.js ️ 封装 axios 实例处理 Token、拦截器等 │ │ └── user.js 具体的业务接口如登录、获取用户信息 │ │ │ ├── assets/ 静态资源图片、SVG、字体等会被打包处理 │ ├── components/ 公共组件不依赖路由高复用 │ │ ├── Button/ 推荐按组件名建文件夹方便管理样式和测试 │ │ │ ├── index.jsx │ │ │ └── Button.css │ │ └── Modal/ │ │ │ ├── config/ ⚙️ 全局配置与常量定义 │ │ └── index.js 存放枚举值、字典数据、全局配置 │ │ │ ├── hooks/ 自定义 Hooks逻辑复用层 │ │ ├── useAuth.js 处理登录、权限等复杂逻辑 │ │ └── useFetch.js 封装通用的数据请求逻辑 │ │ │ ├── layouts/ ️ 全局布局组件 │ │ └── MainLayout.jsx 包含侧边栏、顶部导航、内容区 │ │ │ ├── pages/ 页面组件路由级别负责组装 │ │ ├── Home/ │ │ │ └── index.jsx │ │ └── Login/ │ │ └── index.jsx │ │ │ ├── router/ 路由配置 │ │ └── index.jsx 集中管理路由表、路由守卫、权限控制 │ │ │ ├── store/ ️ 全局状态管理 │ │ └── userStore.js 存放跨组件共享的数据如 Zustand/Redux │ │ │ ├── styles/ 全局样式 │ │ └── global.css 重置样式、主题变量 │ │ │ ├── utils/ ️ 工具函数纯逻辑无副作用 │ │ ├── format.js 日期格式化、数字处理等 │ │ └── auth.js 本地缓存操作、Token 存取 │ │ │ ├── App.jsx 根组件通常在这里引入全局布局和路由 │ └── main.jsx 项目入口文件挂载 React 到 DOM │ ├── .env 开发环境变量 ├── .env.production 生产环境变量 ├── package.json ⚙️ 项目配置与依赖清单 ├── vite.config.js ️ Vite 构建工具配置 └── README.md 项目说明文档五、React与Vue对比React 和 Vue 都是目前前端领域最主流的技术方案但它们的设计理念、语法风格以及生态侧重点有明显差异对比维度Vue.jsReact.js核心定位渐进式 JavaScript 框架自底向上逐层应用核心专注视图层用于构建用户界面的 JavaScript 库专注视图层需搭配生态构建完整应用核心思想响应式数据绑定、MVVM 架构、双向数据流单向数据流、UI f(state)、声明式编程语法风格基于 HTML 的模板语法如v-if,v-for直观易读使用 JSX 语法在 JavaScript 中编写类似 HTML 的结构灵活度高组件结构单文件组件SFC将结构、逻辑、样式封装在.vue文件中组件逻辑与 UI 通常写在同一个 JS/JSX 文件中样式需借助 CSS-in-JS 或 CSS Modules学习曲线较平缓对初学者和传统前端开发者非常友好稍陡峭需要适应 JSX 以及函数式编程思想响应式原理自动追踪依赖Vue 3 基于 Proxy数据变化自动精准更新视图手动触发更新通过setState或 Hooks通常需配合memo等手动优化性能性能表现优秀。编译时优化静态节点提升 运行时细粒度响应式首次渲染快优秀。依托虚拟 DOM 和 Fiber 架构支持并发渲染大型复杂应用表现极佳状态管理官方提供 Vuex旧和 Pinia新推荐集成度高官方提供 Context API适合简单场景复杂场景依赖第三方如 Redux, Zustand路由方案Vue Router官方提供深度集成React Router社区主导但已成为事实标准生态系统生态完善且集中官方工具链齐全国内社区极其活跃生态极其庞大第三方库百花齐放选择极多但有时会导致“选择困难”跨端开发有 Vue Native、UniApp 等方案但成熟度略逊一筹React Native 非常成熟是目前跨平台原生应用开发的主流方案之一适用场景中小型项目、快速原型开发、中后台管理系统、国内企业级项目大型复杂应用、高度定制化 SaaS 平台、对性能要求极高的交互应用背后支持由尤雨溪个人主导创建由全球开源社区驱动维护由 Meta原 Facebook全职团队主导现已成立独立基金会企业级后盾强大 一、React基本概念
一、React简介React 是一个专注于构建用户界面UI的 JavaScript 库。它由 Meta原 Facebook团队在 2013 年开源。核心思想组件化Component-Based这是 React 的灵魂。它把复杂的页面拆分成一个个独立、可复用的小积木组件。声明式编程Declarative传统的开发是“命令式”的你需要一步步告诉浏览器怎么改网页。而 React 是“声明式”的你只需要描述“当数据是 X 时页面应该长 Y 样”。当数据变化时React 会自动帮你更新页面。虚拟 DOMVirtual DOM直接修改真实网页元素DOM是很耗费性能的。React 会在内存中维护一个轻量级的“虚拟 DOM”。当数据变化时它先在虚拟 DOM 上算出差异Diffing然后只把真正改变的那一小部分更新到真实网页上从而保证了极高的渲染性能。单向数据流Unidirectional Data Flow在 React 中数据就像水流一样只能从父组件通过 props 流向子组件。子组件不能直接修改父组件的数据只能通过回调函数通知父组件去改。二、React生态生态分类主流代表工具核心作用与通俗解释全栈/元框架Next.js, Remix提供开箱即用的服务端渲染SSR、路由等高级功能是企业级大型项目的首选框架。构建工具Vite, Webpack项目的“打包机”。Vite 是目前最火的构建工具启动和热更新速度极快大幅提升开发体验。状态管理Redux Toolkit, Zustand解决复杂的数据共享问题。当多个不相关的组件需要共享数据如购物车、用户信息时它们提供全局的数据仓库。路由管理React Router解决单页面应用SPA的页面跳转问题让你在不刷新浏览器的情况下实现多页面的切换效果。样式方案Tailwind CSS解决组件的样式编写和隔离问题。Tailwind 提供大量实用类让你不用离开 HTML 就能快速写出漂亮的样式。类型安全TypeScript给 JavaScript 加上类型系统。虽然学习曲线稍陡但能在你写代码时就提前发现很多低级错误是大型项目的标配。跨端开发React Native“一次学习随处编写”。让你能用写 React 的相同语法和思维直接开发出 iOS 和 Android 的原生手机 App。三、JSX 语法JSX 全称是 JavaScript XML。它看起来像 HTML但本质上是 JavaScript 的一种语法扩展语法糖。它允许你直接在 JS 文件里写类似 HTML 的标签把页面的“视图”和“逻辑”写在同一个地方。示例// 这是一个简单的 React 组件 function WelcomeCard() { // 1. 准备一些 JS 变量在实际开发中这些数据通常来自接口或状态 const userName 前端新手; const avatarUrl https://example.com/avatar.jpg; const isLoggedIn true; // 2. 准备一个样式对象注意JSX 中的内联样式必须是一个对象且属性名要用驼峰命名比如 fontSize const cardStyle { padding: 20px, backgroundColor: #f0f0f0, borderRadius: 8px, fontSize: 16px }; // 3. 返回 JSX 结构 return ( // 使用大括号 {} 引入 JS 变量作为样式 div style{cardStyle} {/* 使用大括号 {} 将 JS 变量嵌入到 HTML 标签中 */} h2你好{userName}/h2 {/* 动态绑定图片的 src 属性同样需要用大括号 {} */} img src{avatarUrl} alt用户头像 / {/* 使用三元运算符进行条件渲染如果登录了显示欢迎否则显示请登录 */} {isLoggedIn ? p欢迎回到你的工作台/p : p请先登录。/p} /div ); } export default WelcomeCard;2. 使用避坑指南标签必须闭合在 HTML 里img可以不用闭合但在 JSX 里必须写成img /或img/img。类名要用 className因为class是 JS 的保留字所以写 CSS 类名时要用classNamebox。只能有一个根元素一个组件返回的标签必须被一个父级包裹。如果你不想多加一个div可以使用空标签Fragment.../包裹起来。本质是语法糖你写的h1Hello/h1在底层会被编译器如 Babel转换成React.createElement(h1, null, Hello)这样的普通 JS 函数调用。四、虚拟DOM1. 虚拟 DOM 的作用提升性能减少真实 DOM 操作在浏览器中直接修改真实的 DOM 是非常昂贵的操作会触发浏览器的重排和重绘。虚拟 DOM 把修改操作转移到内存中的 JS 对象上计算完毕后只把真正改变的部分应用到真实 DOM 上从而避免了频繁触发浏览器渲染保证了页面的流畅。实现跨平台开发因为虚拟 DOM 只是普通的 JS 对象它并不绑定在浏览器环境。React 正是利用这一点通过 React Native 将虚拟 DOM 渲染成手机 App 的原生组件实现了“一次学习随处编写”。简化开发体验声明式编程有了虚拟 DOM开发者不再需要手动去写document.getElementById这种繁琐的代码。你只需要关心“数据变成了什么样”React 会自动帮你处理好底层的 DOM 更新逻辑。2. 虚拟 DOM工作流程构建虚拟 DOM 树当组件首次渲染或状态State/Props发生变化时React 会根据最新的 UI 结构在内存中生成一棵全新的虚拟 DOM 树。对比差异DiffingReact 会将这棵“新树”与上一次的“旧树”进行对比。通过一套高效的 Diff 算法精准找出两棵树之间的差异比如某个文本变了或者新增了某个节点。生成补丁Patching根据找出的差异React 会生成一个最小化的“更新清单”补丁明确知道真实 DOM 哪里需要修改。应用更新Reconciliation/协调最后React 拿着这份清单去修改真实的 DOM。没有发生变化的节点完全不动只更新真正改变的部分。3. Vue 和 React 的虚拟 DOM 对比Vue 和 React 都使用了虚拟 DOM但它们的底层设计哲学有很大区别。更新机制不同手动触发 vs 自动追踪React采用“状态驱动”。当你在 React 中调用 setState 或 useState 时React 会默认从当前组件开始重新渲染它以及它的所有子组件然后生成新的虚拟 DOM 树进行全量对比。因此React 往往需要开发者手动使用 React.memo 等 API 来避免不必要的重渲染。Vue采用“响应式系统”。Vue 会在底层自动追踪数据的变化依赖收集。当某个数据改变时Vue 能精准知道是哪个组件用到了这个数据从而只触发该组件的重新渲染。Vue 的更新粒度更细天生具备精准更新的优势。Diff 算法策略不同单向遍历 vs 双端对比React在处理同层级的列表节点时React 默认采用单向遍历。它从左到右依次对比新旧列表如果发现有节点移动比如把列表最后一项移到第一项React 可能会产生较多的 DOM 移动操作。Vue采用了更精细的双端对比策略头头、尾尾、头尾、尾头交叉对比并且在 Vue3 中引入了“最长递增子序列”算法。这使得 Vue 在处理复杂的列表排序、反转等场景时能以最小的 DOM 操作完成更新。优化手段不同纯运行时 vs 编译时优化React它的虚拟 DOM 是纯运行时的。每次更新时React 必须遍历整棵树去比较每个节点的属性哪怕这个节点是永远不会改变的静态内容。Vue采用了“带编译时信息的虚拟 DOM”。Vue 的模板编译器在打包阶段就会进行静态分析给不会变化的“静态节点”打上标记。在运行时 Diff 时Vue 会直接跳过这些静态节点只对比动态节点大大减少了计算量。四、React项目结构React 项目并没有强制要求的目录规范不同团队和项目规模会有差异。下面是以 Vite 创建项目后常见的目录结构其中src目录是日常开发的核心工作区my-react-app/ ├── public/ 静态资源目录不会被打包工具处理 │ ├── index.html 应用入口 HTML │ ├── favicon.ico 网站图标 │ └── robots.txt 搜索引擎爬虫规则 │ ├── src/ 源代码目录核心工作区99%的代码都在这里 │ ├── api/ 接口请求层或命名为 services │ │ ├── request.js ️ 封装 axios 实例处理 Token、拦截器等 │ │ └── user.js 具体的业务接口如登录、获取用户信息 │ │ │ ├── assets/ 静态资源图片、SVG、字体等会被打包处理 │ ├── components/ 公共组件不依赖路由高复用 │ │ ├── Button/ 推荐按组件名建文件夹方便管理样式和测试 │ │ │ ├── index.jsx │ │ │ └── Button.css │ │ └── Modal/ │ │ │ ├── config/ ⚙️ 全局配置与常量定义 │ │ └── index.js 存放枚举值、字典数据、全局配置 │ │ │ ├── hooks/ 自定义 Hooks逻辑复用层 │ │ ├── useAuth.js 处理登录、权限等复杂逻辑 │ │ └── useFetch.js 封装通用的数据请求逻辑 │ │ │ ├── layouts/ ️ 全局布局组件 │ │ └── MainLayout.jsx 包含侧边栏、顶部导航、内容区 │ │ │ ├── pages/ 页面组件路由级别负责组装 │ │ ├── Home/ │ │ │ └── index.jsx │ │ └── Login/ │ │ └── index.jsx │ │ │ ├── router/ 路由配置 │ │ └── index.jsx 集中管理路由表、路由守卫、权限控制 │ │ │ ├── store/ ️ 全局状态管理 │ │ └── userStore.js 存放跨组件共享的数据如 Zustand/Redux │ │ │ ├── styles/ 全局样式 │ │ └── global.css 重置样式、主题变量 │ │ │ ├── utils/ ️ 工具函数纯逻辑无副作用 │ │ ├── format.js 日期格式化、数字处理等 │ │ └── auth.js 本地缓存操作、Token 存取 │ │ │ ├── App.jsx 根组件通常在这里引入全局布局和路由 │ └── main.jsx 项目入口文件挂载 React 到 DOM │ ├── .env 开发环境变量 ├── .env.production 生产环境变量 ├── package.json ⚙️ 项目配置与依赖清单 ├── vite.config.js ️ Vite 构建工具配置 └── README.md 项目说明文档五、React与Vue对比React 和 Vue 都是目前前端领域最主流的技术方案但它们的设计理念、语法风格以及生态侧重点有明显差异对比维度Vue.jsReact.js核心定位渐进式 JavaScript 框架自底向上逐层应用核心专注视图层用于构建用户界面的 JavaScript 库专注视图层需搭配生态构建完整应用核心思想响应式数据绑定、MVVM 架构、双向数据流单向数据流、UI f(state)、声明式编程语法风格基于 HTML 的模板语法如v-if,v-for直观易读使用 JSX 语法在 JavaScript 中编写类似 HTML 的结构灵活度高组件结构单文件组件SFC将结构、逻辑、样式封装在.vue文件中组件逻辑与 UI 通常写在同一个 JS/JSX 文件中样式需借助 CSS-in-JS 或 CSS Modules学习曲线较平缓对初学者和传统前端开发者非常友好稍陡峭需要适应 JSX 以及函数式编程思想响应式原理自动追踪依赖Vue 3 基于 Proxy数据变化自动精准更新视图手动触发更新通过setState或 Hooks通常需配合memo等手动优化性能性能表现优秀。编译时优化静态节点提升 运行时细粒度响应式首次渲染快优秀。依托虚拟 DOM 和 Fiber 架构支持并发渲染大型复杂应用表现极佳状态管理官方提供 Vuex旧和 Pinia新推荐集成度高官方提供 Context API适合简单场景复杂场景依赖第三方如 Redux, Zustand路由方案Vue Router官方提供深度集成React Router社区主导但已成为事实标准生态系统生态完善且集中官方工具链齐全国内社区极其活跃生态极其庞大第三方库百花齐放选择极多但有时会导致“选择困难”跨端开发有 Vue Native、UniApp 等方案但成熟度略逊一筹React Native 非常成熟是目前跨平台原生应用开发的主流方案之一适用场景中小型项目、快速原型开发、中后台管理系统、国内企业级项目大型复杂应用、高度定制化 SaaS 平台、对性能要求极高的交互应用背后支持由尤雨溪个人主导创建由全球开源社区驱动维护由 Meta原 Facebook全职团队主导现已成立独立基金会企业级后盾强大