[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"chapter-book:kbXvOKMJ":3,"chapter:OeKLNM8b":189},{"id":4,"created_at":5,"updated_at":5,"code":6,"author_id":7,"title":8,"slug":9,"cover_theme_key":10,"visibility":11,"status":12,"sort_order":4,"favorite_count":13,"view_count":14,"author":15,"chapter_count":26,"word_count":27,"free_count":13,"is_favorite":24,"book_status":12,"unparted":28},11,"2024-09-18T13:22:18.377+08:00","kbXvOKMJ",1,"从零开始学习React","从零开始学习react-11","default","public","published",0,3,{"id":7,"created_at":16,"updated_at":17,"code":18,"username":19,"display_name":20,"role":21,"avatar_url":22,"is_active":23,"is_banned":24,"follower_count":13,"following_count":14,"last_login_at":25},"2023-11-30T23:53:12.952+08:00","2026-10-20T16:16:54.352+08:00","Mg87g8Gk","1701359592888","大苹果","verified_author","\u002Fcuts\u002F17021220625513129.png",true,false,"2026-10-20T16:12:35+08:00",20,144925,[29,37,45,53,61,69,77,85,93,101,109,117,125,133,141,149,157,165,173,181],{"id":30,"created_at":31,"updated_at":31,"code":32,"author_id":7,"book_id":4,"slug":33,"article_id":34,"title":35,"sort_order":30,"content":36,"status":12},105,"2024-09-18T13:25:12.928+08:00","bn8o05Xe","学习大纲-105",518,"学习大纲","以下是从零开始学习 React 的大纲，涵盖了从基础到精通的学习路径。每一阶段都包含核心概念、实践项目和学习资源。\n\n### 1. **基础阶段**\n\n#### 1.1 JavaScript 基础\n\n- **掌握目标**：熟悉 ES6 及其后的 JavaScript 语法特性。\n - 变量（`let`，`const`）\n - 箭头函数\n - 模板字符串\n - 解构赋值\n - 扩展运算符（`...`）\n - 类与模块化（`import\u002Fexport`）\n\n#### 1.2 HTML & CSS 基础\n\n- **掌握目标**：了解如何构建页面结构，布局和样式。\n - HTML5 基本标签和语义化\n - CSS Flexbox 和 Grid 布局\n - 响应式设计基础\n\n#### 1.3 React 基础\n\n- **学习内容**：\n\n - React 的基本概念和框架：什么是组件？\n - JSX 语法基础\n - 函数组件 vs 类组件\n - 状态（State）与属性（Props）\n - 事件处理\n - 条件渲染\n- **项目**：创建一个简单的待办事项（To-do List）应用。\n\n---\n\n### 2. **进阶阶段**\n\n#### 2.1 React 核心功能\n\n- **学习内容**：\n - 使用 Hooks（`useState`, `useEffect`）\n - 表单处理与受控组件\n - 列表与键值（`key`）\n - 生命周期方法（通过 Hooks 实现）\n\n#### 2.2 React 路由与导航\n\n- **学习内容**：\n - React Router 的安装与使用\n - 路由切换与动态路由\n - 嵌套路由与 404 页面的处理\n\n#### 2.3 状态管理\n\n- **学习内容**：\n\n - 组件间数据传递：父子组件\n - Context API\n - Redux 基础概念与使用\n - Redux 工具链：Redux Toolkit\n- **项目**：创建一个带有用户登录功能的博客应用，使用路由进行页面跳转并使用 Context API 或 Redux 管理全局状态。\n\n---\n\n### 3. **高阶阶段**\n\n#### 3.1 性能优化\n\n- **学习内容**：\n - 组件懒加载（React.lazy, Suspense）\n - 使用 `useMemo` 和 `useCallback` 进行性能优化\n - React 的虚拟 DOM 和如何优化重新渲染\n - React 事件合成机制\n\n#### 3.2 自定义 Hooks\n\n- **学习内容**：\n - 学习如何编写自定义 Hooks 以提高代码复用性\n - 使用第三方库时封装自定义 Hooks\n\n#### 3.3 React Server-side Rendering (SSR)\n\n- **学习内容**：\n - Next.js 的基础知识与使用\n - Static Site Generation (SSG) 和 Incremental Static Regeneration (ISR)\n - SEO 优化\n\n#### 3.4 高级状态管理工具\n\n- **学习内容**：\n\n - MobX、Recoil 等替代状态管理工具\n - 使用 Zustand 等简化状态管理的工具\n- **项目**：构建一个带有 SSR 的全栈电商应用。\n\n---\n\n### 4. **精通阶段**\n\n#### 4.1 构建大型应用\n\n- **学习内容**：\n - React 项目结构和模块化\n - 使用 Monorepo 管理大型项目（例如：Lerna 或 Nx）\n - 设计模式在 React 中的应用（容器组件与展示组件等）\n - 前端缓存策略与优化\n\n#### 4.2 React 生态系统\n\n- **学习内容**：\n - 使用 TypeScript 与 React 搭配开发\n - 测试工具（Jest, React Testing Library）\n - 使用 GraphQL 与 Apollo Client 进行数据管理\n - 与流行的 UI 库（如 Material-UI, Ant Design）的集成\n\n#### 4.3 企业级应用开发\n\n- **学习内容**：\n\n - 微前端架构与 React 的集成\n - CI\u002FCD（持续集成与部署）工具链的使用（例如：GitHub Actions, Jenkins 等）\n - Docker 与容器化部署 React 应用\n- **项目**：构建一个复杂的多用户权限管理系统，集成实时数据更新和安全策略。\n\n---\n\n### 5. **精通实战项目**\n\n- **项目1**：构建一个具有多种用户权限的 SaaS 应用，带有订阅支付系统。\n- **项目2**：构建一个实时聊天应用，使用 WebSocket 或 GraphQL 订阅。\n\n### 6. **学习资源**\n\n- **官方文档**：\n\n - [React 官方文档](https:\u002F\u002Freactjs.org\u002F)\n - [Redux 官方文档](https:\u002F\u002Fredux.js.org\u002F)\n - [Next.js 官方文档](https:\u002F\u002Fnextjs.org\u002F)\n- **练习平台**：\n\n - CodeSandbox、CodePen\n",{"id":38,"created_at":39,"updated_at":39,"code":40,"author_id":7,"book_id":4,"slug":41,"article_id":42,"title":43,"sort_order":38,"content":44,"status":12},106,"2024-09-18T13:26:28.773+08:00","Rv8J3MXm","javascript-基础-106",519,"JavaScript 基础","要掌握 JavaScript 基础，尤其是 ES6（ECMAScript 2015）及其后的 JavaScript 语法特性，以下是你需要重点学习和掌握的内容：\n\n### 1. **变量声明**\n\n- **`let` 和 `const`**：\n - `let` 用于声明可以改变的变量（块级作用域）。\n - `const` 用于声明常量（块级作用域），值不能重新赋值。\n\n ```javascript\n let age = 30;\n const name = \"John\";\n ```\n\n### 2. **箭头函数**\n\n- **语法简化**：箭头函数是用来简化函数表达式的语法。\n- **特点**：箭头函数不绑定自己的 `this` 值。\n ```javascript\n const sum = (a, b) => a + b;\n ```\n\n### 3. **模板字符串**\n\n- **特性**：可以嵌入表达式，更加灵活地处理字符串。\n- **语法**：使用反引号（`` ` ``）和 `${}` 语法。\n ```javascript\n const name = \"Alice\";\n const message = `Hello, ${name}!`;\n ```\n\n### 4. **解构赋值**\n\n- **数组解构**：从数组中提取值并赋给变量。\n ```javascript\n const [a, b] = [1, 2];\n console.log(a); \u002F\u002F 1\n ```\n- **对象解构**：从对象中提取属性值并赋给变量。\n ```javascript\n const person = { name: \"John\", age: 30 };\n const { name, age } = person;\n console.log(name); \u002F\u002F John\n ```\n\n### 5. **扩展运算符（Spread Operator）**\n\n- **在数组中使用**：用于将数组展开或合并数组。\n ```javascript\n const arr1 = [1, 2];\n const arr2 = [...arr1, 3, 4];\n console.log(arr2); \u002F\u002F [1, 2, 3, 4]\n ```\n- **在对象中使用**：用于复制对象或合并对象。\n ```javascript\n const obj1 = { a: 1, b: 2 };\n const obj2 = { ...obj1, c: 3 };\n console.log(obj2); \u002F\u002F { a: 1, b: 2, c: 3 }\n ```\n\n### 6. **默认参数**\n\n- **特性**：可以为函数参数设置默认值。\n ```javascript\n function greet(name = \"Guest\") {\n return `Hello, ${name}`;\n }\n console.log(greet()); \u002F\u002F Hello, Guest\n ```\n\n### 7. **`for...of` 循环**\n\n- **特性**：用于遍历数组或可迭代对象。\n ```javascript\n const numbers = [1, 2, 3];\n for (const number of numbers) {\n console.log(number);\n }\n ```\n\n### 8. **`for...in` 循环**\n\n- **特性**：用于遍历对象的可枚举属性。\n ```javascript\n const person = { name: \"Alice\", age: 25 };\n for (const key in person) {\n console.log(`${key}: ${person[key]}`);\n }\n ```\n\n### 9. **类与模块化**\n\n- **类（Classes）**：使用类语法来定义对象的构造函数和方法。\n\n ```javascript\n class Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n return `Hello, my name is ${this.name}`;\n }\n }\n\n const person1 = new Person(\"John\", 30);\n console.log(person1.greet()); \u002F\u002F Hello, my name is John\n ```\n- **模块化（Modules）**：\n\n - **导出（`export`）和导入（`import`）**：使用 `export` 导出模块，使用 `import` 导入模块。\n\n ```javascript\n \u002F\u002F file: math.js\n export const sum = (a, b) => a + b;\n\n \u002F\u002F file: app.js\n import { sum } from '.\u002Fmath.js';\n console.log(sum(2, 3)); \u002F\u002F 5\n ```\n\n### 10. **`Promise` 和 异步编程**\n\n- **`Promise`**：用于处理异步操作。\n\n ```javascript\n const promise = new Promise((resolve, reject) => {\n const success = true;\n if (success) {\n resolve(\"Success!\");\n } else {\n reject(\"Failed!\");\n }\n });\n\n promise\n .then(result => console.log(result))\n .catch(error => console.error(error));\n ```\n- **`async` 和 `await`**：用来简化 `Promise` 的处理流程。\n\n ```javascript\n async function fetchData() {\n try {\n const response = await fetch('https:\u002F\u002Fapi.example.com\u002Fdata');\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error(error);\n }\n }\n\n fetchData();\n ```\n\n掌握这些 ES6 及其后的 JavaScript 特性，将为你打下坚实的基础，有助于更深入地学习 React 及其他现代 JavaScript 技术。\n",{"id":46,"created_at":47,"updated_at":47,"code":48,"author_id":7,"book_id":4,"slug":49,"article_id":50,"title":51,"sort_order":46,"content":52,"status":12},107,"2024-09-18T13:28:51.056+08:00","4N8m7GKA","html--css-基础-107",520,"HTML & CSS 基础","要构建页面结构、布局和样式，了解 HTML5 和 CSS 是非常重要的。以下是学习 HTML & CSS 基础的内容，帮助你掌握页面构建所需的技能。\n\n### 1. **HTML5 基本标签和语义化**\n\nHTML5 提供了一系列标签用于创建语义化的网页结构，这些标签不仅提升了代码的可读性，还帮助搜索引擎理解网页内容。\n\n#### 1.1 常见 HTML5 语义化标签：\n\n- **`\u003Cheader>`**：定义文档或网页的一部分头部内容，通常包含导航栏、标题等。\n\n ```html\n \u003Cheader>\n \u003Ch1>网站标题\u003C\u002Fh1>\n \u003Cnav>\n \u003Cul>\n \u003Cli>\u003Ca href=\"#\">主页\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#\">关于我们\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#\">联系\u003C\u002Fa>\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n \u003C\u002Fheader>\n ```\n- **`\u003Cnav>`**：用于定义页面中的导航链接。\n\n ```html\n \u003Cnav>\n \u003Cul>\n \u003Cli>\u003Ca href=\"#section1\">Section 1\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#section2\">Section 2\u003C\u002Fa>\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n ```\n- **`\u003Csection>`**：表示文档中的独立章节，通常包含一个标题。\n\n ```html\n \u003Csection>\n \u003Ch2>关于我们\u003C\u002Fh2>\n \u003Cp>公司信息描述...\u003C\u002Fp>\n \u003C\u002Fsection>\n ```\n- **`\u003Carticle>`**：用于表示文档中的独立可分发内容，如博客文章或新闻。\n\n ```html\n \u003Carticle>\n \u003Ch2>文章标题\u003C\u002Fh2>\n \u003Cp>文章内容...\u003C\u002Fp>\n \u003C\u002Farticle>\n ```\n- **`\u003Cfooter>`**：定义文档或文档的一部分的页脚信息，通常包含版权、链接等。\n\n ```html\n \u003Cfooter>\n \u003Cp>© 2024 公司名称\u003C\u002Fp>\n \u003C\u002Ffooter>\n ```\n\n#### 1.2 其他常用的标签：\n\n- **`\u003Cdiv>`**：表示文档中的一个容器，通常用于布局。\n- **`\u003Cspan>`**：用于在行内包裹文本，适用于小范围样式应用。\n- **`\u003Cimg>`**：插入图片。\n- **`\u003Ca>`**：定义超链接。\n\n### 2. **CSS 基础**\n\nCSS 用于控制页面元素的布局和样式，包括字体、颜色、尺寸、边距、定位等。\n\n#### 2.1 选择器和样式规则\n\n- **选择器**：可以根据元素、类、ID 等方式来选择 HTML 元素。\n\n - 元素选择器：`p { color: blue; }`\n - 类选择器：`.className { background-color: yellow; }`\n - ID 选择器：`#idName { font-size: 18px; }`\n- **样式规则**：通过 `属性: 值;` 的形式为元素应用样式。\n\n ```css\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n }\n\n h1 {\n color: #333;\n }\n\n .container {\n padding: 20px;\n border: 1px solid #ddd;\n }\n ```\n\n#### 2.2 CSS 布局模型\n\n- **盒模型（Box Model）**：每个 HTML 元素都被视为一个矩形盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。\n ```css\n .box {\n width: 200px;\n height: 100px;\n padding: 10px;\n border: 1px solid #000;\n margin: 20px;\n }\n ```\n\n### 3. **Flexbox 布局**\n\nCSS Flexbox 是一种强大的布局方式，用于创建响应式、灵活的布局。\n\n#### 3.1 Flex 容器与项目\n\n- 使用 `display: flex` 将父容器变成 flex 容器，其子元素则成为 flex 项目。\n ```css\n .container {\n display: flex;\n }\n\n .item {\n flex: 1; \u002F* 子元素等宽 *\u002F\n }\n ```\n\n#### 3.2 常用属性\n\n- **`justify-content`**：控制水平对齐方式（在主轴上的排列方式）。\n\n ```css\n .container {\n justify-content: space-between; \u002F* 项目之间均匀分布 *\u002F\n }\n ```\n- **`align-items`**：控制垂直对齐方式（在交叉轴上的排列方式）。\n\n ```css\n .container {\n align-items: center; \u002F* 垂直居中 *\u002F\n }\n ```\n- **`flex-direction`**：控制主轴方向，可以选择行（`row`）或列（`column`）。\n\n ```css\n .container {\n flex-direction: row; \u002F* 横向排列 *\u002F\n }\n ```\n\n#### 3.3 Flexbox 示例\n\n```html\n\u003Cdiv class=\"container\">\n \u003Cdiv class=\"item\">Item 1\u003C\u002Fdiv>\n \u003Cdiv class=\"item\">Item 2\u003C\u002Fdiv>\n \u003Cdiv class=\"item\">Item 3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cstyle>\n .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .item {\n background-color: lightblue;\n padding: 10px;\n margin: 5px;\n }\n\u003C\u002Fstyle>\n```\n\n### 4. **Grid 布局**\n\nCSS Grid 是一种二维布局系统，允许你在行和列之间创建复杂的布局。\n\n#### 4.1 创建 Grid 容器\n\n- 使用 `display: grid` 将父元素定义为 grid 容器，设置行列模板。\n ```css\n .grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr); \u002F* 3 列等宽 *\u002F\n grid-gap: 10px; \u002F* 项目之间的间距 *\u002F\n }\n ```\n\n#### 4.2 Grid 项目\n\n- **控制项目的跨度**：可以使用 `grid-column` 和 `grid-row` 控制项目在网格中的跨度。\n ```css\n .item1 {\n grid-column: span 2; \u002F* 跨两列 *\u002F\n }\n ```\n\n#### 4.3 Grid 示例\n\n```html\n\u003Cdiv class=\"grid-container\">\n \u003Cdiv class=\"item1\">Item 1\u003C\u002Fdiv>\n \u003Cdiv class=\"item2\">Item 2\u003C\u002Fdiv>\n \u003Cdiv class=\"item3\">Item 3\u003C\u002Fdiv>\n \u003Cdiv class=\"item4\">Item 4\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cstyle>\n .grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n }\n .item {\n background-color: lightgreen;\n padding: 10px;\n }\n\u003C\u002Fstyle>\n```\n\n### 5. **响应式设计基础**\n\n响应式设计的目标是创建能够适应不同屏幕大小的网页布局。使用媒体查询（Media Queries）可以根据设备的宽度调整布局。\n\n#### 5.1 媒体查询示例\n\n- 使用 `@media` 设置条件样式，在特定屏幕尺寸下应用不同的布局。\n ```css\n @media (max-width: 768px) {\n .container {\n flex-direction: column; \u002F* 在较小屏幕上，改为垂直布局 *\u002F\n }\n }\n ```\n\n#### 5.2 移动优先设计\n\n- 优先为移动设备设计，再通过媒体查询为更大的屏幕做优化。设置默认样式为移动设备样式，然后根据屏幕尺寸变化调整。\n ```css\n .container {\n display: flex;\n flex-direction: column;\n }\n\n @media (min-width: 768px) {\n .container {\n flex-direction: row;\n }\n }\n ```\n\n通过掌握这些 HTML5 和 CSS 技术，你将能够构建结构清晰、布局灵活、响应性强的网页。\n",{"id":54,"created_at":55,"updated_at":55,"code":56,"author_id":7,"book_id":4,"slug":57,"article_id":58,"title":59,"sort_order":54,"content":60,"status":12},108,"2024-09-18T13:32:24.486+08:00","1l63RNKg","react-基础-108",521,"React 基础","### React 基础知识：从核心概念到基础应用\n\n#### 1. **React 的基本概念和框架**\n\nReact 是一个用于构建用户界面的 JavaScript 库，主要用于创建单页应用（SPA）。React 的核心理念是组件化开发，通过将页面分解为多个可重用的**组件**，提高开发效率、可维护性和可扩展性。\n\n#### 2. **什么是组件？**\n\n**组件**是 React 应用的基本构建块。每个组件可以看作是一个独立、可重用的 UI 部件，可以是一个按钮、一个表单或是整个页面。组件可以嵌套、组合，从而构建出复杂的用户界面。\n\nReact 中的组件有两种常见类型：\n\n- **函数组件（Functional Component）**\n- **类组件（Class Component）**\n\n---\n\n### 3. **JSX 语法基础**\n\nJSX 是 React 中的一种语法扩展，它允许你在 JavaScript 中编写 HTML 代码。虽然 JSX 看起来像 HTML，但它最终会被编译成纯 JavaScript。\n\n#### 3.1 JSX 语法规则：\n\n- 在 JSX 中，所有元素都必须闭合。例如 `\u003Cdiv>\u003C\u002Fdiv>` 或 `\u003Cinput \u002F>`。\n- JSX 允许你在表达式中插入 JavaScript 代码，通过使用 `{}`。\n ```jsx\n const name = \"Alice\";\n return \u003Ch1>Hello, {name}!\u003C\u002Fh1>;\n ```\n\n#### 3.2 JSX 示例：\n\n```jsx\nfunction Welcome() {\n const user = \"John\";\n return \u003Ch1>Welcome, {user}!\u003C\u002Fh1>;\n}\n```\n\n---\n\n### 4. **函数组件 vs 类组件**\n\n#### 4.1 函数组件（Functional Component）\n\n函数组件是 React 最简洁的组件类型。它通过一个函数来定义组件，并且直接返回 JSX 代码。自从 React 16.8 推出了 Hooks，函数组件可以管理状态和副作用，越来越流行。\n\n```jsx\nfunction Greeting(props) {\n return \u003Ch1>Hello, {props.name}!\u003C\u002Fh1>;\n}\n```\n\n#### 4.2 类组件（Class Component）\n\n类组件通过 ES6 类来定义，必须继承 `React.Component`，并且需要包含 `render` 方法来返回 JSX。类组件在过去用于管理状态和生命周期方法，但随着 Hooks 的引入，现在大部分新项目推荐使用函数组件。\n\n```jsx\nclass Greeting extends React.Component {\n render() {\n return \u003Ch1>Hello, {this.props.name}!\u003C\u002Fh1>;\n }\n}\n```\n\n---\n\n### 5. **状态（State）与属性（Props）**\n\n#### 5.1 **属性（Props）**\n\n- **`props`** 是组件的输入参数，代表从父组件传递给子组件的数据。\n- Props 是只读的，不能在组件内部改变。\n- 函数组件通过函数参数获取 `props`，类组件通过 `this.props` 访问。\n ```jsx\n function Welcome(props) {\n return \u003Ch1>Hello, {props.name}!\u003C\u002Fh1>;\n }\n ```\n\n#### 5.2 **状态（State）**\n\n- **`state`** 是组件内部的数据，它可以在组件内部改变。\n- 类组件中的 `state` 通过 `this.state` 管理，而函数组件通过 `useState` Hook 来管理。\n- 当组件的状态改变时，React 会自动重新渲染该组件。\n\n**类组件中的状态**：\n\n```jsx\nclass Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n }\n\n increment = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n return (\n \u003Cdiv>\n \u003Cp>Count: {this.state.count}\u003C\u002Fp>\n \u003Cbutton onClick={this.increment}>Increase\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n }\n}\n```\n\n**函数组件中的状态（使用 `useState` Hook）**：\n\n```jsx\nimport { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n \u003Cdiv>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003Cbutton onClick={() => setCount(count + 1)}>Increase\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n```\n\n---\n\n### 6. **事件处理**\n\n在 React 中，事件处理函数与 DOM 事件处理类似，但不同之处在于 React 使用驼峰命名法来命名事件属性（如 `onClick` 而不是 `onclick`），并且事件处理函数使用的是函数引用，而不是字符串。\n\n#### 6.1 事件处理示例：\n\n```jsx\nfunction Button() {\n function handleClick() {\n alert('Button clicked!');\n }\n\n return \u003Cbutton onClick={handleClick}>Click me\u003C\u002Fbutton>;\n}\n```\n\n在类组件中，可以使用 `this` 绑定事件处理函数：\n\n```jsx\nclass Button extends React.Component {\n handleClick() {\n alert('Button clicked!');\n }\n\n render() {\n return \u003Cbutton onClick={this.handleClick}>Click me\u003C\u002Fbutton>;\n }\n}\n```\n\n#### 6.2 传递参数给事件处理函数：\n\n如果你想在事件处理函数中传递参数，可以使用箭头函数或 `bind` 方法：\n\n```jsx\nfunction Button(props) {\n return \u003Cbutton onClick={() => props.onClick(props.id)}>Click me\u003C\u002Fbutton>;\n}\n```\n\n---\n\n### 7. **条件渲染**\n\nReact 允许根据条件动态地渲染不同的内容。常用的条件渲染方法有：\n\n- **`if` 语句**\n- **三元运算符** (`condition ? true : false`)\n- **逻辑运算符** (`&&`)\n\n#### 7.1 `if` 语句：\n\n```jsx\nfunction Greeting(props) {\n if (props.isLoggedIn) {\n return \u003Ch1>Welcome back!\u003C\u002Fh1>;\n }\n return \u003Ch1>Please log in.\u003C\u002Fh1>;\n}\n```\n\n#### 7.2 三元运算符：\n\n```jsx\nfunction Greeting(props) {\n return props.isLoggedIn ? \u003Ch1>Welcome back!\u003C\u002Fh1> : \u003Ch1>Please log in.\u003C\u002Fh1>;\n}\n```\n\n#### 7.3 `&&` 运算符：\n\n当条件为 `true` 时，渲染后面的内容：\n\n```jsx\nfunction Notification(props) {\n return (\n \u003Cdiv>\n {props.hasUnreadMessages && \u003Cp>You have unread messages.\u003C\u002Fp>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n---\n\n### 总结：\n\n通过学习 React 的基础知识，你可以理解组件化开发的核心思想，并掌握 JSX 语法、函数组件和类组件的区别、状态和属性的管理、事件处理以及条件渲染等核心概念。这些是 React 应用开发的基础，在深入学习前端开发时非常重要。\n",{"id":62,"created_at":63,"updated_at":63,"code":64,"author_id":7,"book_id":4,"slug":65,"article_id":66,"title":67,"sort_order":62,"content":68,"status":12},109,"2024-09-18T13:35:22.931+08:00","7vXPEZKZ","简单的待办事项to-do-list应用-109",522,"简单的待办事项（To-do List）应用","创建一个简单的待办事项（To-do List）应用是一个很好的练习，用来学习 React 的基础概念。这个示例将使用 React 的函数组件和 `useState` Hook 来管理状态，并实现添加和删除待办事项的功能。\n\n### 1. 项目结构\n\n我们假设你已经在一个 React 项目中，可以使用 `create-react-app` 或其他工具来初始化项目。\n\n```\nsrc\u002F\n └── App.js\n └── index.js\n```\n\n### 2. 在 `App.js` 中编写代码\n\n```jsx\nimport React, { useState } from 'react';\nimport '.\u002FApp.css';\n\nfunction App() {\n \u002F\u002F 定义待办事项的状态\n const [todos, setTodos] = useState([]);\n const [input, setInput] = useState('');\n\n \u002F\u002F 添加新任务\n const addTodo = () => {\n if (input.trim()) {\n setTodos([...todos, input.trim()]);\n setInput(''); \u002F\u002F 清空输入框\n }\n };\n\n \u002F\u002F 删除任务\n const deleteTodo = (indexToDelete) => {\n const newTodos = todos.filter((_, index) => index !== indexToDelete);\n setTodos(newTodos);\n };\n\n return (\n \u003Cdiv className=\"App\">\n \u003Ch1>待办事项\u003C\u002Fh1>\n \n {\u002F* 输入框和添加按钮 *\u002F}\n \u003Cdiv>\n \u003Cinput\n type=\"text\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n placeholder=\"请输入待办事项\"\n \u002F>\n \u003Cbutton onClick={addTodo}>添加\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n {\u002F* 待办事项列表 *\u002F}\n \u003Cul>\n {todos.map((todo, index) => (\n \u003Cli key={index}>\n {todo} \n \u003Cbutton onClick={() => deleteTodo(index)}>删除\u003C\u002Fbutton>\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n\nexport default App;\n```\n\n### 3. 样式（`App.css`）\n\n```css\n.App {\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n}\n\ninput {\n padding: 10px;\n margin-right: 10px;\n font-size: 16px;\n}\n\nbutton {\n padding: 10px;\n font-size: 16px;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n display: flex;\n justify-content: space-between;\n margin: 10px 0;\n padding: 10px;\n background-color: #f4f4f4;\n}\n\nli button {\n background-color: red;\n color: white;\n border: none;\n padding: 5px 10px;\n cursor: pointer;\n}\n```\n\n### 4. 运行应用\n\n当你完成了上述代码，可以通过 `npm start` 或 `yarn start` 来启动项目。你将看到一个简单的待办事项应用，用户可以输入任务，点击 \"添加\" 按钮将其添加到列表中，并通过点击 \"删除\" 按钮来移除任务。\n\n---\n\n### 功能总结\n\n- **添加任务**：通过输入框输入待办事项，并点击按钮将其添加到任务列表。\n- **删除任务**：每个任务旁边有一个删除按钮，点击后该任务将从列表中移除。\n\n这个示例展示了 React 中如何使用 `useState` 来管理组件状态，如何处理输入框的值，以及如何渲染和操作列表中的数据。\n",{"id":70,"created_at":71,"updated_at":71,"code":72,"author_id":7,"book_id":4,"slug":73,"article_id":74,"title":75,"sort_order":70,"content":76,"status":12},110,"2024-09-21T03:19:15.148+08:00","Q18bj38x","react-核心功能-110",523,"React 核心功能","在 React 中，核心功能包括管理组件的状态、处理副作用（如 API 调用或定时器）、处理表单和渲染列表。React 的 Hooks 使得函数组件能够实现这些功能，特别是 `useState` 和 `useEffect` 是最常用的 Hooks。\n\n以下是对这些核心功能的详细介绍，包括如何使用 `useState` 和 `useEffect` 处理表单、列表渲染以及模拟生命周期方法。\n\n---\n\n### 1. **使用 Hooks（`useState`, `useEffect`）**\n\n#### 1.1 **`useState`：状态管理**\n\n`useState` 是用于在函数组件中管理状态的 Hook。它返回一个状态值和一个用于更新该状态的函数。\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0); \u002F\u002F 初始状态为0\n\n return (\n \u003Cdiv>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003Cbutton onClick={() => setCount(count + 1)}>Increase\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Counter;\n```\n\n在这个示例中，`count` 是状态变量，`setCount` 是更新 `count` 的函数。每次点击按钮，状态都会更新，React 会重新渲染组件。\n\n#### 1.2 **`useEffect`：处理副作用**\n\n`useEffect` 用于处理副作用，比如数据获取、订阅、手动 DOM 操作等。它可以看作是函数组件中的生命周期方法（例如 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount`）。\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction Timer() {\n const [seconds, setSeconds] = useState(0);\n\n \u002F\u002F 使用 useEffect 来模拟计时器\n useEffect(() => {\n const interval = setInterval(() => {\n setSeconds((prevSeconds) => prevSeconds + 1);\n }, 1000);\n\n \u002F\u002F 清理副作用，类似 componentWillUnmount\n return () => clearInterval(interval);\n }, []); \u002F\u002F 空数组作为依赖，表示该副作用只在组件挂载时执行一次\n\n return \u003Cdiv>Seconds: {seconds}\u003C\u002Fdiv>;\n}\n\nexport default Timer;\n```\n\n`useEffect` 中的清理函数（`return () => ...`）在组件卸载时执行，这在处理订阅、计时器等副作用时非常重要。\n\n---\n\n### 2. **表单处理与受控组件**\n\n在 React 中，表单元素通常作为**受控组件**，即它们的值由 React 状态控制。受控组件的输入值会被存储在组件的状态中，通过 `onChange` 事件监听器来实时更新状态。\n\n#### 2.1 **受控组件示例**\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction SimpleForm() {\n const [name, setName] = useState('');\n\n const handleSubmit = (event) => {\n event.preventDefault(); \u002F\u002F 阻止表单默认提交行为\n alert(`Form submitted! Name: ${name}`);\n };\n\n return (\n \u003Cform onSubmit={handleSubmit}>\n \u003Clabel>\n Name:\n \u003Cinput \n type=\"text\" \n value={name} \n onChange={(e) => setName(e.target.value)} \u002F\u002F 实时更新状态\n \u002F>\n \u003C\u002Flabel>\n \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n\nexport default SimpleForm;\n```\n\n在这个例子中，输入框的值 `value={name}` 是由组件的 `name` 状态控制的，每次用户输入时，`onChange` 事件会更新该状态。\n\n---\n\n### 3. **列表与键值（`key`）**\n\n当在 React 中渲染列表时，建议为每个列表项添加一个唯一的 `key` 属性。`key` 用于帮助 React 识别哪些元素被改变、添加或删除，以便优化重新渲染的性能。\n\n#### 3.1 **列表渲染示例**\n\n```jsx\nimport React from 'react';\n\nfunction TodoList({ todos }) {\n return (\n \u003Cul>\n {todos.map((todo, index) => (\n \u003Cli key={index}>{todo}\u003C\u002Fli> \u002F\u002F 使用唯一的 key 值\n ))}\n \u003C\u002Ful>\n );\n}\n\nexport default TodoList;\n```\n\n`key` 必须是唯一的，如果没有合适的唯一标识符，通常可以使用数组的索引。不过在动态列表（如待办事项）中，最好使用真正唯一的值（如 `id`）。\n\n---\n\n### 4. **生命周期方法（通过 Hooks 实现）**\n\nReact Hooks 可以模拟类组件中的生命周期方法：\n\n- **`componentDidMount`**：可以通过 `useEffect` 的依赖数组为空 `[]` 来实现。该副作用只在组件首次挂载时执行。\n- **`componentDidUpdate`**：通过 `useEffect` 监听依赖值的变化，当依赖值更新时，副作用会执行。依赖数组中放入需要监听的状态或属性。\n- **`componentWillUnmount`**：通过 `useEffect` 返回的清理函数来实现，它在组件卸载时执行。\n\n#### 4.1 **生命周期方法示例**\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction LifecycleDemo() {\n const [count, setCount] = useState(0);\n\n \u002F\u002F 模拟 componentDidMount 和 componentDidUpdate\n useEffect(() => {\n console.log('Component mounted or count updated');\n\n return () => {\n console.log('Component will unmount or cleanup before next useEffect run');\n };\n }, [count]); \u002F\u002F 依赖 count，当 count 更新时，副作用重新执行\n\n return (\n \u003Cdiv>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003Cbutton onClick={() => setCount(count + 1)}>Increase\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default LifecycleDemo;\n```\n\n在这个示例中，`useEffect` 在组件挂载和 `count` 变化时执行，当组件卸载或下一次更新副作用时执行清理函数。\n\n---\n\n### 总结\n\n- **`useState`**：用于在函数组件中管理状态。\n- **`useEffect`**：处理副作用，可以模拟生命周期方法（`componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount`）。\n- **受控组件**：通过 React 状态控制表单输入的值，实时同步输入框的值和状态。\n- **列表渲染与键值（`key`）**：渲染列表时必须为每个列表项提供唯一的 `key`，以帮助 React 高效更新 DOM。\n\n通过这些核心功能，你可以管理 React 应用中的状态、副作用、表单数据和列表渲染，并通过 Hooks 模拟类组件中的生命周期方法。\n",{"id":78,"created_at":79,"updated_at":79,"code":80,"author_id":7,"book_id":4,"slug":81,"article_id":82,"title":83,"sort_order":78,"content":84,"status":12},111,"2024-09-21T05:46:27.8+08:00","kbXvraXM","react-路由与导航-111",524,"React 路由与导航","React Router 是用于处理 React 应用中的路由和导航的一个库。通过 React Router，开发者可以轻松实现单页面应用（SPA）中的多页面导航、动态路由以及嵌套路由等功能。下面将介绍如何安装并使用 React Router，处理路由切换、动态路由、嵌套路由以及 404 页面。\n\n---\n\n### 1. **React Router 的安装与基本使用**\n\n首先，需要安装 `react-router-dom`：\n\n```bash\nnpm install react-router-dom\n```\n\n或者：\n\n```bash\nyarn add react-router-dom\n```\n\n#### 1.1 **基础路由配置**\n\n在 `App.js` 中使用 `BrowserRouter`、`Routes` 和 `Route` 组件来定义不同页面的路由。\n\n```jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\n\nfunction Home() {\n return \u003Ch2>Home Page\u003C\u002Fh2>;\n}\n\nfunction About() {\n return \u003Ch2>About Page\u003C\u002Fh2>;\n}\n\nfunction App() {\n return (\n \u003CRouter>\n \u003Cnav>\n \u003Cul>\n \u003Cli>\n \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n \u003C\u002Fli>\n \u003Cli>\n \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n\n \u003CRoutes>\n \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n );\n}\n\nexport default App;\n```\n\n- **`BrowserRouter`**：用于包裹整个路由系统。\n- **`Routes`**：包含所有的 `Route` 组件，每个 `Route` 组件用于定义一个路径和其对应的组件。\n- **`Link`**：用于导航，它渲染为 `\u003Ca>` 标签，并通过 `to` 属性指定要导航的路径。\n\n---\n\n### 2. **路由切换与动态路由**\n\n#### 2.1 **路由切换**\n\nReact Router 通过 `Link` 和 `useNavigate` 实现页面的路由切换。\n\n```jsx\nimport { useNavigate } from 'react-router-dom';\n\nfunction Home() {\n const navigate = useNavigate();\n\n const goToAbout = () => {\n navigate('\u002Fabout');\n };\n\n return (\n \u003Cdiv>\n \u003Ch2>Home Page\u003C\u002Fh2>\n \u003Cbutton onClick={goToAbout}>Go to About\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n```\n\n`useNavigate` 是一个 React Router 提供的 Hook，用于在不刷新页面的情况下导航到不同的路由。\n\n#### 2.2 **动态路由**\n\n动态路由用于处理类似 `\u002Fusers\u002F:id` 这种路径，其中 `:id` 是动态变化的部分。可以通过 `useParams` Hook 获取动态路由参数。\n\n```jsx\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction User() {\n const { id } = useParams(); \u002F\u002F 获取 URL 中的 id 参数\n\n return \u003Ch2>User ID: {id}\u003C\u002Fh2>;\n}\n\nfunction App() {\n return (\n \u003CRouter>\n \u003CRoutes>\n \u003CRoute path=\"\u002Fusers\u002F:id\" element={\u003CUser \u002F>} \u002F> {\u002F* 动态路由 *\u002F}\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n );\n}\n\nexport default App;\n```\n\n在这个例子中，`\u002Fusers\u002F:id` 中的 `id` 是一个动态变量，访问 `\u002Fusers\u002F123` 将渲染出 `User ID: 123`。\n\n---\n\n### 3. **嵌套路由**\n\n嵌套路由用于在一个父路由中嵌入子路由。父路由和子路由可以共享布局或导航菜单。\n\n#### 3.1 **嵌套路由示例**\n\n```jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';\n\nfunction Dashboard() {\n return (\n \u003Cdiv>\n \u003Ch2>Dashboard\u003C\u002Fh2>\n \u003Cnav>\n \u003Cul>\n \u003Cli>\n \u003CLink to=\"profile\">Profile\u003C\u002FLink>\n \u003C\u002Fli>\n \u003Cli>\n \u003CLink to=\"settings\">Settings\u003C\u002FLink>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n {\u002F* 嵌套路由出口 *\u002F}\n \u003COutlet \u002F>\n \u003C\u002Fdiv>\n );\n}\n\nfunction Profile() {\n return \u003Ch3>Profile Page\u003C\u002Fh3>;\n}\n\nfunction Settings() {\n return \u003Ch3>Settings Page\u003C\u002Fh3>;\n}\n\nfunction App() {\n return (\n \u003CRouter>\n \u003CRoutes>\n \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>}>\n \u003CRoute path=\"profile\" element={\u003CProfile \u002F>} \u002F> {\u002F* 嵌套路由 *\u002F}\n \u003CRoute path=\"settings\" element={\u003CSettings \u002F>} \u002F> {\u002F* 嵌套路由 *\u002F}\n \u003C\u002FRoute>\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n );\n}\n\nexport default App;\n```\n\n- **`Outlet`**：用于渲染嵌套路由的出口。父路由组件中定义的 `Outlet` 是子路由渲染的地方。\n- 在 `\u002Fdashboard` 路径下，可以通过点击 `Profile` 和 `Settings` 进行嵌套导航，而无需离开 `Dashboard` 页面。\n\n---\n\n### 4. **404 页面处理**\n\n当用户访问不存在的路由时，React Router 可以通过一个特殊的 `Route` 组件来渲染 404 页面。\n\n#### 4.1 **404 页面示例**\n\n```jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\n\nfunction Home() {\n return \u003Ch2>Home Page\u003C\u002Fh2>;\n}\n\nfunction About() {\n return \u003Ch2>About Page\u003C\u002Fh2>;\n}\n\nfunction NotFound() {\n return \u003Ch2>404 - Page Not Found\u003C\u002Fh2>;\n}\n\nfunction App() {\n return (\n \u003CRouter>\n \u003Cnav>\n \u003Cul>\n \u003Cli>\n \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n \u003C\u002Fli>\n \u003Cli>\n \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n\n \u003CRoutes>\n \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n {\u002F* 404 页面 *\u002F}\n \u003CRoute path=\"*\" element={\u003CNotFound \u002F>} \u002F>\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n );\n}\n\nexport default App;\n```\n\n- `path=\"*\"`：匹配所有未定义的路由，这意味着如果用户访问了未定义的路径，将会渲染 `NotFound` 组件。\n\n---\n\n### 总结\n\n- **安装 React Router**：通过 `npm install react-router-dom` 安装。\n- **基础路由**：使用 `BrowserRouter`、`Routes`、`Route` 和 `Link` 实现基本导航和路由切换。\n- **动态路由**：通过 `useParams` 获取动态 URL 参数。\n- **嵌套路由**：通过 `Outlet` 渲染嵌套的子路由。\n- **404 页面处理**：通过定义 `path=\"*\"` 的路由来处理未找到的页面。\n\nReact Router 提供了强大的路由功能，让你能够轻松构建多页面的单页应用（SPA），通过动态和嵌套路由等特性来创建更加复杂的路由结构。\n",{"id":86,"created_at":87,"updated_at":87,"code":88,"author_id":7,"book_id":4,"slug":89,"article_id":90,"title":91,"sort_order":86,"content":92,"status":12},112,"2024-09-21T06:02:28.355+08:00","Lb6GNjKe","状态管理-112",525,"状态管理","在 React 中，管理组件间的数据传递是一个非常常见的需求。从简单的父子组件数据传递，到跨组件或深层嵌套组件的数据共享，React 提供了多种状态管理的解决方案。本文将介绍以下内容：\n\n1. 父子组件的数据传递\n2. **Context API**：适用于较简单的全局状态管理\n3. **Redux**：更复杂的状态管理工具，适合中大型应用\n4. **Redux Toolkit**：Redux 的官方工具包，简化 Redux 的开发流程\n\n---\n\n### 1. **父子组件间的数据传递**\n\n在 React 中，父子组件之间的数据传递是通过**props**实现的。\n\n#### 1.1 **父组件向子组件传递数据**\n\n```jsx\nimport React from 'react';\n\nfunction Child({ message }) {\n return \u003Ch2>{message}\u003C\u002Fh2>;\n}\n\nfunction Parent() {\n const greeting = \"Hello from Parent!\";\n return \u003CChild message={greeting} \u002F>;\n}\n\nexport default Parent;\n```\n\n- 父组件 `Parent` 通过 `props` 将数据传递给子组件 `Child`。\n- 子组件 `Child` 接收 `message` 作为 `props`，并在 JSX 中渲染。\n\n#### 1.2 **子组件向父组件传递数据**\n\n可以通过将一个回调函数作为 `props` 传递给子组件，实现子组件向父组件传递数据。\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Child({ sendMessage }) {\n return \u003Cbutton onClick={() => sendMessage(\"Message from Child\")}>Send Message\u003C\u002Fbutton>;\n}\n\nfunction Parent() {\n const [message, setMessage] = useState(\"\");\n\n return (\n \u003Cdiv>\n \u003Ch2>{message}\u003C\u002Fh2>\n \u003CChild sendMessage={setMessage} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Parent;\n```\n\n- 父组件通过 `sendMessage` 回调函数接收来自子组件的消息。\n\n---\n\n### 2. **Context API**\n\n`Context API` 允许我们在组件树中无须通过每一层 `props` 的逐级传递，直接共享数据。它适合跨越多个组件层级的简单状态共享，比如主题、语言或用户信息。\n\n#### 2.1 **创建和使用 Context**\n\n```jsx\nimport React, { useState, createContext, useContext } from 'react';\n\n\u002F\u002F 创建 Context\nconst MyContext = createContext();\n\nfunction Child() {\n \u002F\u002F 使用 useContext Hook 获取上下文的值\n const message = useContext(MyContext);\n return \u003Ch2>{message}\u003C\u002Fh2>;\n}\n\nfunction Parent() {\n const [message, setMessage] = useState(\"Hello from Context!\");\n\n return (\n \u003CMyContext.Provider value={message}> {\u002F* 提供上下文数据 *\u002F}\n \u003CChild \u002F>\n \u003C\u002FMyContext.Provider>\n );\n}\n\nexport default Parent;\n```\n\n- **`createContext`**：创建一个上下文。\n- **`MyContext.Provider`**：通过 `Provider` 组件将数据注入到整个子树中。\n- **`useContext`**：子组件中使用 `useContext` 获取 `MyContext` 中的数据。\n\n#### 2.2 **Context API 的场景**\n\n- 主题管理（比如切换暗黑模式和浅色模式）\n- 用户登录状态或权限管理\n- 多语言支持\n\n**优点**：\n\n- 适合中小型项目中需要在多个组件间共享全局状态的场景。\n\n**缺点**：\n\n- 随着项目的复杂度增加，Context API 容易产生\"prop drilling\"（状态提升和逐级传递问题），状态管理不够集中。\n\n---\n\n### 3. **Redux 基础概念与使用**\n\nRedux 是一种**集中化状态管理**的方案，适用于需要在多个地方使用和共享复杂状态的大型应用。它通过\"单一数据源\"来管理整个应用的状态，确保状态流动的可控性和可预测性。\n\n#### 3.1 **Redux 核心概念**\n\n- **Store**：保存整个应用的状态。\n- **Action**：表示要执行的操作（如增、删、改），通过 `dispatch` 发送给 `reducer`。\n- **Reducer**：接收 `action` 并基于当前的 `state` 返回一个新的 `state`。\n- **Dispatch**：触发 `action`，将操作传递给 `reducer` 进行处理。\n\n#### 3.2 **简单 Redux 示例**\n\n```bash\nnpm install redux react-redux\n```\n\n**Step 1**: 创建 `reducer` 来处理状态\n\n```javascript\n\u002F\u002F counterReducer.js\nconst initialState = { count: 0 };\n\nfunction counterReducer(state = initialState, action) {\n switch (action.type) {\n case 'INCREMENT':\n return { ...state, count: state.count + 1 };\n case 'DECREMENT':\n return { ...state, count: state.count - 1 };\n default:\n return state;\n }\n}\n\nexport default counterReducer;\n```\n\n**Step 2**: 创建 `store`\n\n```javascript\nimport { createStore } from 'redux';\nimport counterReducer from '.\u002FcounterReducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n```\n\n**Step 3**: 使用 `Provider` 使应用能够访问 `store`\n\n```jsx\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport store from '.\u002Fstore';\nimport Counter from '.\u002FCounter';\n\nfunction App() {\n return (\n \u003CProvider store={store}>\n \u003CCounter \u002F>\n \u003C\u002FProvider>\n );\n}\n\nexport default App;\n```\n\n**Step 4**: 使用 `useSelector` 和 `useDispatch` 与 Redux 进行交互\n\n```jsx\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\n\nfunction Counter() {\n const count = useSelector((state) => state.count); \u002F\u002F 从 Redux 中获取状态\n const dispatch = useDispatch(); \u002F\u002F 派发 action\n\n return (\n \u003Cdiv>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003Cbutton onClick={() => dispatch({ type: 'INCREMENT' })}>Increment\u003C\u002Fbutton>\n \u003Cbutton onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Counter;\n```\n\n---\n\n### 4. **工具链：Redux Toolkit**\n\n为了简化 Redux 的开发，Redux 团队推出了 `Redux Toolkit`，它封装了 Redux 的常用功能，减少了样板代码。\n\n#### 4.1 **安装 Redux Toolkit**\n\n```bash\nnpm install @reduxjs\u002Ftoolkit react-redux\n```\n\n#### 4.2 **Redux Toolkit 示例**\n\n**Step 1**: 使用 `configureStore` 和 `createSlice`\n\n```javascript\nimport { configureStore, createSlice } from '@reduxjs\u002Ftoolkit';\n\nconst counterSlice = createSlice({\n name: 'counter',\n initialState: { count: 0 },\n reducers: {\n increment(state) {\n state.count += 1;\n },\n decrement(state) {\n state.count -= 1;\n },\n },\n});\n\nexport const { increment, decrement } = counterSlice.actions;\n\nconst store = configureStore({\n reducer: counterSlice.reducer,\n});\n\nexport default store;\n```\n\n**Step 2**: 在组件中使用 `useSelector` 和 `useDispatch`\n\n```jsx\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment, decrement } from '.\u002Fstore';\n\nfunction Counter() {\n const count = useSelector((state) => state.count);\n const dispatch = useDispatch();\n\n return (\n \u003Cdiv>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003Cbutton onClick={() => dispatch(increment())}>Increment\u003C\u002Fbutton>\n \u003Cbutton onClick={() => dispatch(decrement())}>Decrement\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Counter;\n```\n\n#### 4.3 **Redux Toolkit 的优点**\n\n- **简化 reducer**：无需手动处理 `switch` 语句，直接使用 `createSlice` 创建切片。\n- **包含异步处理**：集成了 `createAsyncThunk` 处理异步逻辑（如 API 请求）。\n- **预配置的 `store`**：`configureStore` 默认配置了 Redux DevTools 和 `middleware`。\n\n---\n\n### 总结\n\n1. **父子组件数据传递**：通过 `props` 实现父子组件间的数据传递。\n2. **Context API**：适合在中小型应用中全局共享状态，避免多层级 `props` 传递。\n3. **Redux**：集中化的状态管理工具，适用于中大型应用，特别是需要在不同页面共享复杂状态的场景。\n4. **Redux Toolkit**：Redux 的简化工具链，减少了样板代码，并简化了状态管理的流程。\n\nContext API 和 Redux 各有优势。对于小型应用或状态传递较简单的场景，Context API 是一个轻量且便捷的选择。而对于复杂的大型应用，Redux 提供了更加集中化和结构化的状态管理方式，配合 Redux Toolkit 可以大幅提升开发效率。\n",{"id":94,"created_at":95,"updated_at":95,"code":96,"author_id":7,"book_id":4,"slug":97,"article_id":98,"title":99,"sort_order":94,"content":100,"status":12},113,"2024-09-21T06:18:36.617+08:00","lMK9gp82","react博客项目-113",526,"React博客项目","创建一个带有用户登录功能的博客应用，使用 React 路由进行页面跳转，并使用 Context API 或 Redux 来管理全局状态。下面是一个示例项目结构，包括登录、博客页面、和全局状态管理。\n\n我们将分步骤展示如何实现：\n\n1. 使用 `React Router` 进行页面路由\n2. 使用 `Context API` 或 `Redux` 进行全局状态管理\n3. 创建登录和博客页面，并实现登录逻辑\n4. 页面跳转和状态管理\n\n### 项目文件结构\n\n```\n\u002Fsrc\n \u002Fcomponents\n - Blog.js\n - Home.js\n - Login.js\n - Navbar.js\n \u002Fcontext\n - AuthContext.js\n \u002Fstore (如果使用 Redux)\n - store.js\n - authSlice.js\n - App.js\n - index.js\n```\n\n---\n\n### 1. **项目初始化与安装依赖**\n\n首先，使用 `npx create-react-app` 创建一个新项目，并安装必要的依赖。\n\n```bash\nnpx create-react-app react-blog\ncd react-blog\nnpm install react-router-dom\n```\n\n如果使用 **Redux**，还需要安装 Redux 及其工具包：\n\n```bash\nnpm install @reduxjs\u002Ftoolkit react-redux\n```\n\n---\n\n### 2. **使用 React Router 配置路由**\n\n#### 2.1 `App.js`\n\n```jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport Home from '.\u002Fcomponents\u002FHome';\nimport Blog from '.\u002Fcomponents\u002FBlog';\nimport Login from '.\u002Fcomponents\u002FLogin';\nimport Navbar from '.\u002Fcomponents\u002FNavbar';\n\nfunction App() {\n return (\n \u003CRouter>\n \u003CNavbar \u002F>\n \u003CRoutes>\n \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n \u003CRoute path=\"\u002Fblog\" element={\u003CBlog \u002F>} \u002F>\n \u003CRoute path=\"\u002Flogin\" element={\u003CLogin \u002F>} \u002F>\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n );\n}\n\nexport default App;\n```\n\n- `BrowserRouter` 包裹整个应用，`Routes` 包含多个 `Route`，每个路由对应不同的页面。\n- `Navbar` 为导航栏，允许用户在不同页面间跳转。\n\n#### 2.2 `Navbar.js` - 导航组件\n\n```jsx\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n \u003Cnav>\n \u003Cul>\n \u003Cli>\n \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n \u003C\u002Fli>\n \u003Cli>\n \u003CLink to=\"\u002Fblog\">Blog\u003C\u002FLink>\n \u003C\u002Fli>\n \u003Cli>\n \u003CLink to=\"\u002Flogin\">Login\u003C\u002FLink>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n );\n}\n\nexport default Navbar;\n```\n\n---\n\n### 3. **使用 Context API 进行全局状态管理**\n\n为了演示登录逻辑，使用 `Context API` 管理全局的用户登录状态。\n\n#### 3.1 创建 `AuthContext.js`\n\n```jsx\nimport React, { createContext, useState, useContext } from 'react';\n\nconst AuthContext = createContext();\n\nexport const useAuth = () => useContext(AuthContext);\n\nexport function AuthProvider({ children }) {\n const [user, setUser] = useState(null); \u002F\u002F null 表示未登录\n\n const login = (username) => {\n setUser({ username });\n };\n\n const logout = () => {\n setUser(null);\n };\n\n return (\n \u003CAuthContext.Provider value={{ user, login, logout }}>\n {children}\n \u003C\u002FAuthContext.Provider>\n );\n}\n```\n\n- `AuthContext`：提供登录状态。\n- `login` 和 `logout` 方法用于改变用户登录状态。\n\n#### 3.2 在 `App.js` 中引入 `AuthProvider`\n\n```jsx\nimport { AuthProvider } from '.\u002Fcontext\u002FAuthContext';\n\nfunction App() {\n return (\n \u003CAuthProvider>\n \u003CRouter>\n \u003CNavbar \u002F>\n \u003CRoutes>\n \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n \u003CRoute path=\"\u002Fblog\" element={\u003CBlog \u002F>} \u002F>\n \u003CRoute path=\"\u002Flogin\" element={\u003CLogin \u002F>} \u002F>\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n \u003C\u002FAuthProvider>\n );\n}\n```\n\n- `AuthProvider` 包裹整个应用，提供全局的登录状态。\n\n---\n\n### 4. **创建登录页面**\n\n#### 4.1 `Login.js`\n\n```jsx\nimport React, { useState } from 'react';\nimport { useAuth } from '..\u002Fcontext\u002FAuthContext';\nimport { useNavigate } from 'react-router-dom';\n\nfunction Login() {\n const [username, setUsername] = useState('');\n const { login } = useAuth();\n const navigate = useNavigate();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n login(username); \u002F\u002F 执行登录逻辑\n navigate('\u002Fblog'); \u002F\u002F 登录后跳转到博客页面\n };\n\n return (\n \u003Cdiv>\n \u003Ch2>Login\u003C\u002Fh2>\n \u003Cform onSubmit={handleSubmit}>\n \u003Cinput \n type=\"text\" \n value={username}\n onChange={(e) => setUsername(e.target.value)} \n placeholder=\"Enter username\"\n required \n \u002F>\n \u003Cbutton type=\"submit\">Login\u003C\u002Fbutton>\n \u003C\u002Fform>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Login;\n```\n\n- 用户输入用户名后提交登录表单，通过 `useAuth` 的 `login` 方法更改全局状态，并通过 `useNavigate` 跳转到博客页面。\n\n---\n\n### 5. **博客页面与状态显示**\n\n#### 5.1 `Blog.js`\n\n```jsx\nimport React from 'react';\nimport { useAuth } from '..\u002Fcontext\u002FAuthContext';\nimport { useNavigate } from 'react-router-dom';\n\nfunction Blog() {\n const { user, logout } = useAuth();\n const navigate = useNavigate();\n\n const handleLogout = () => {\n logout(); \u002F\u002F 执行登出\n navigate('\u002F'); \u002F\u002F 登出后跳转到主页\n };\n\n if (!user) {\n return \u003Cp>You need to log in to see the blog content.\u003C\u002Fp>;\n }\n\n return (\n \u003Cdiv>\n \u003Ch2>Welcome to the Blog, {user.username}!\u003C\u002Fh2>\n \u003Cbutton onClick={handleLogout}>Logout\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Blog;\n```\n\n- 如果用户未登录，将显示提示信息。如果用户已登录，将显示博客内容及登出按钮。\n\n---\n\n### 6. **主页**\n\n#### 6.1 `Home.js`\n\n```jsx\nimport React from 'react';\n\nfunction Home() {\n return (\n \u003Cdiv>\n \u003Ch2>Home Page\u003C\u002Fh2>\n \u003Cp>Welcome to the blog application!\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Home;\n```\n\n---\n\n### 7. **使用 Redux 进行状态管理（可选）**\n\n如果使用 Redux 来管理登录状态，可替代 Context API。创建一个 `authSlice.js` 来管理登录逻辑。\n\n#### 7.1 `authSlice.js`\n\n```javascript\nimport { createSlice } from '@reduxjs\u002Ftoolkit';\n\nconst authSlice = createSlice({\n name: 'auth',\n initialState: { user: null },\n reducers: {\n login(state, action) {\n state.user = { username: action.payload };\n },\n logout(state) {\n state.user = null;\n },\n },\n});\n\nexport const { login, logout } = authSlice.actions;\nexport default authSlice.reducer;\n```\n\n#### 7.2 配置 `store.js`\n\n```javascript\nimport { configureStore } from '@reduxjs\u002Ftoolkit';\nimport authReducer from '.\u002FauthSlice';\n\nconst store = configureStore({\n reducer: {\n auth: authReducer,\n },\n});\n\nexport default store;\n```\n\n#### 7.3 在 `App.js` 中使用 Redux\n\n```jsx\nimport { Provider } from 'react-redux';\nimport store from '.\u002Fstore';\n\nfunction App() {\n return (\n \u003CProvider store={store}>\n \u003CRouter>\n \u003CNavbar \u002F>\n \u003CRoutes>\n \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n \u003CRoute path=\"\u002Fblog\" element={\u003CBlog \u002F>} \u002F>\n \u003CRoute path=\"\u002Flogin\" element={\u003CLogin \u002F>} \u002F>\n \u003C\u002FRoutes>\n \u003C\u002FRouter>\n \u003C\u002FProvider>\n );\n}\n\nexport default App;\n```\n\n#### 7.4 使用 `useSelector` 和 `useDispatch` 在组件中获取和更新状态\n\n在 `Login.js` 和 `Blog.js` 中，使用 `useSelector` 获取用户状态，使用 `useDispatch` 执行登录和登出操作。\n\n---\n\n### 总结\n\n这个项目展示了如何使用 `React Router`、`Context API` 或 `Redux` 来实现一个带有用户登录功能的博客应用。通过使用路由进行页面跳转和全局状态管理，用户可以登录后访问博客内容，并在退出后重新回到首页。\n",{"id":102,"created_at":103,"updated_at":103,"code":104,"author_id":7,"book_id":4,"slug":105,"article_id":106,"title":107,"sort_order":102,"content":108,"status":12},114,"2024-09-21T06:19:04.575+08:00","7WKlEP6m","性能优化-114",527,"性能优化","在 React 开发中，性能优化是非常重要的一个方面，尤其在大型应用中。下面将介绍以下关键优化技术：\n\n1. **组件懒加载**（`React.lazy` 和 `Suspense`）\n2. 使用 **`useMemo`** 和 **`useCallback`** 进行性能优化\n3. **React 虚拟 DOM** 及如何优化重新渲染\n4. **React 事件合成机制**\n\n---\n\n### 1. **组件懒加载：`React.lazy` 和 `Suspense`**\n\n组件懒加载可以帮助我们按需加载组件，减少初始加载时间，特别是在大型应用中。`React.lazy` 和 `Suspense` 一起使用来实现组件懒加载。\n\n#### 示例\n\n```jsx\nimport React, { Suspense } from 'react';\n\n\u002F\u002F 懒加载组件\nconst Blog = React.lazy(() => import('.\u002FBlog'));\n\nfunction App() {\n return (\n \u003Cdiv>\n \u003Ch1>My App\u003C\u002Fh1>\n {\u002F* 使用 Suspense 包裹懒加载的组件 *\u002F}\n \u003CSuspense fallback={\u003Cdiv>Loading...\u003C\u002Fdiv>}>\n \u003CBlog \u002F>\n \u003C\u002FSuspense>\n \u003C\u002Fdiv>\n );\n}\n\nexport default App;\n```\n\n- **`React.lazy`**：懒加载 `Blog` 组件，只有在需要时才会加载该组件。\n- **`Suspense`**：用于在懒加载时显示备用的内容（例如 `Loading` 字样），`fallback` 属性可以定义在组件加载前显示的内容。\n\n#### 使用场景\n\n- 大型组件或页面（如后台管理系统中的仪表盘）按需加载\n- 多个路由对应的页面组件，避免初始时一次性加载所有页面\n\n---\n\n### 2. **使用 `useMemo` 和 `useCallback` 进行性能优化**\n\n`useMemo` 和 `useCallback` 是 React 中两个非常重要的性能优化 Hook，用于缓存计算结果和函数，避免不必要的重新计算和渲染。\n\n#### 2.1 **`useMemo`：优化计算密集型操作**\n\n`useMemo` 用于缓存计算密集型操作的结果，只有依赖项发生变化时才会重新计算。\n\n#### 示例\n\n```jsx\nimport React, { useState, useMemo } from 'react';\n\nfunction ExpensiveComponent({ number }) {\n \u002F\u002F 假设这是一个计算密集型操作\n const calculate = (num) => {\n console.log('Calculating...');\n return num * 2;\n };\n\n \u002F\u002F useMemo 只在 number 发生变化时重新计算\n const result = useMemo(() => calculate(number), [number]);\n\n return \u003Cdiv>Result: {result}\u003C\u002Fdiv>;\n}\n\nfunction App() {\n const [count, setCount] = useState(0);\n const [number, setNumber] = useState(5);\n\n return (\n \u003Cdiv>\n \u003Ch1>useMemo Example\u003C\u002Fh1>\n \u003Cbutton onClick={() => setCount(count + 1)}>Increment Count\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setNumber(number + 1)}>Change Number\u003C\u002Fbutton>\n \u003CExpensiveComponent number={number} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\nexport default App;\n```\n\n- **`useMemo`**：缓存 `calculate` 函数的结果，只有当 `number` 改变时才会重新计算，避免每次组件重新渲染时都执行计算密集型操作。\n\n#### 2.2 **`useCallback`：优化函数引用**\n\n`useCallback` 用于缓存函数引用，只有依赖项变化时才会生成新的函数。它通常用于避免子组件因父组件的函数引用变化而重新渲染。\n\n#### 示例\n\n```jsx\nimport React, { useState, useCallback } from 'react';\n\nfunction Child({ onClick }) {\n console.log('Child component re-rendered');\n return \u003Cbutton onClick={onClick}>Click Me\u003C\u002Fbutton>;\n}\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n \u002F\u002F 使用 useCallback 缓存函数引用，避免 Child 组件不必要的重新渲染\n const handleClick = useCallback(() => {\n setCount((prevCount) => prevCount + 1);\n }, []);\n\n return (\n \u003Cdiv>\n \u003Ch1>useCallback Example\u003C\u002Fh1>\n \u003CChild onClick={handleClick} \u002F>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n\nexport default App;\n```\n\n- **`useCallback`**：只有当依赖项发生变化时，才会创建新的函数引用，避免 `Child` 组件因函数引用的变化而不必要地重新渲染。\n\n---\n\n### 3. **React 虚拟 DOM 和如何优化重新渲染**\n\n#### 3.1 **虚拟 DOM 简介**\n\nReact 的虚拟 DOM 是一种轻量级的 JavaScript 对象，表示真实 DOM 的抽象。每当组件的状态或属性发生变化时，React 会先更新虚拟 DOM，之后通过**diff 算法**计算出最小的变化，再高效地更新真实 DOM。\n\n#### 3.2 **优化重新渲染的方法**\n\n1. **减少不必要的组件更新**\n\n - 使用 `React.memo` 包裹函数组件，只有当 `props` 发生变化时，才会重新渲染该组件。\n\n ```jsx\n const MyComponent = React.memo(function MyComponent(props) {\n return \u003Cdiv>{props.value}\u003C\u002Fdiv>;\n });\n ```\n2. **使用 `shouldComponentUpdate` 或 `PureComponent`**\n\n - 对于类组件，可以使用 `shouldComponentUpdate` 来控制组件是否需要更新。\n - **`React.PureComponent`** 自动实现 `shouldComponentUpdate`，只会在 `props` 或 `state` 发生浅比较变化时才重新渲染。\n3. **避免不必要的状态更新**\n\n - 在 `useState` 中避免频繁更新不必要的状态，只在真正需要更新时调用 `setState` 或 `setXXX`。\n4. **按需渲染**\n\n - 按需渲染部分页面内容或组件，结合懒加载提高应用性能。\n\n---\n\n### 4. **React 事件合成机制**\n\nReact 实现了一套自己的事件系统，称为**合成事件**（Synthetic Events）。它在浏览器原生事件基础上封装了一个跨浏览器的统一 API，确保不同浏览器行为一致性。\n\n#### 4.1 **合成事件的工作原理**\n\n- React 并不会直接将事件处理程序绑定在具体的 DOM 元素上，而是通过事件代理机制，将所有的事件都委托给了根元素（例如 `document`）。\n- 当事件触发时，React 会将原生事件封装成**合成事件**对象，再传递给相应的事件处理函数。\n\n#### 4.2 **合成事件的优点**\n\n1. **跨浏览器兼容性**：通过合成事件封装，React 提供统一的事件 API，解决了不同浏览器事件处理的差异。\n2. **事件委托优化**：通过事件委托，React 将所有事件处理程序绑定在一个地方，从而减少了对真实 DOM 的操作，提升了性能。\n3. **批处理机制**：React 合成事件系统配合其批处理更新机制，能够在事件处理过程中减少重复的渲染。\n\n#### 4.3 **示例**\n\n```jsx\nfunction App() {\n const handleClick = (event) => {\n \u002F\u002F 合成事件对象\n console.log(event); \u002F\u002F React 合成事件对象\n console.log(event.nativeEvent); \u002F\u002F 原生事件对象\n };\n\n return \u003Cbutton onClick={handleClick}>Click me\u003C\u002Fbutton>;\n}\n\nexport default App;\n```\n\n#### 4.4 **合成事件与原生事件的区别**\n\n- 合成事件可以访问原生事件对象，通过 `event.nativeEvent` 获取。\n- 合成事件对象会在事件回调函数执行完后被回收，为了避免访问已被回收的事件，可以使用 `event.persist()`。\n\n#### 4.5 **事件委托机制的优化**\n\nReact 通过事件委托机制，减少了对 DOM 的直接操作，即使在一个包含大量 DOM 元素的复杂应用中，事件处理也能保持较高的性能。\n\n---\n\n### 总结\n\n- **懒加载**（`React.lazy` 和 `Suspense`）能够按需加载组件，减少初始页面加载时间。\n- **`useMemo`** 和 **`useCallback`** 可以缓存计算结果和函数引用，减少不必要的渲染。\n- **React 虚拟 DOM** 通过 diff 算法高效更新 DOM，我们可以通过减少状态更新、使用 `React.memo` 等方式优化渲染。\n- **合成事件**机制提供了跨浏览器的一致性事件处理，并通过事件委托机制减少 DOM 操作，优化性能。\n\n这些优化技术能够显著提高 React 应用的性能和用户体验，尤其是在大型应用或性能敏感的场景中。\n",{"id":110,"created_at":111,"updated_at":111,"code":112,"author_id":7,"book_id":4,"slug":113,"article_id":114,"title":115,"sort_order":110,"content":116,"status":12},115,"2024-09-21T06:23:57.959+08:00","QmXRZBXz","自定义-hooks-115",528,"自定义 Hooks","自定义 Hooks 是 React 中提高代码复用性的重要工具。它们允许我们将逻辑抽离并封装成独立的 Hook，使不同组件可以共享相同的状态逻辑和副作用，从而避免代码重复。通过自定义 Hooks，可以将复杂的逻辑封装在函数中，提升代码的可维护性和简洁性。\n\n在以下内容中，我们将介绍：\n\n1. **自定义 Hooks 的定义与使用**\n2. **通过自定义 Hooks 提高代码复用性**\n3. **第三方库封装自定义 Hooks**\n\n---\n\n### 1. **自定义 Hooks 的定义与使用**\n\n#### 1.1 什么是自定义 Hooks？\n\n自定义 Hooks 是可以复用的状态逻辑，它是一个普通的 JavaScript 函数，名字必须以 `use` 开头（这是 React 约定的命名规则）。自定义 Hooks 可以调用其他 Hooks，并且可以像其他 React Hooks 一样返回状态和行为。\n\n#### 1.2 如何定义自定义 Hooks\n\n自定义 Hook 和普通函数的最大区别在于它内部会使用 React 的内置 Hooks（如 `useState`, `useEffect` 等）。\n\n**示例：使用自定义 Hook 获取窗口尺寸**\n\n```jsx\nimport { useState, useEffect } from 'react';\n\n\u002F\u002F 自定义 Hook: useWindowSize\nfunction useWindowSize() {\n const [windowSize, setWindowSize] = useState({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n\n useEffect(() => {\n \u002F\u002F 定义处理窗口尺寸变化的函数\n const handleResize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n };\n\n \u002F\u002F 添加窗口 resize 事件监听器\n window.addEventListener('resize', handleResize);\n\n \u002F\u002F 清理函数，移除事件监听器\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n return windowSize;\n}\n\nexport default useWindowSize;\n```\n\n#### 1.3 使用自定义 Hook\n\n在组件中使用自定义 Hooks 和使用 React 内置 Hooks 是一样的。\n\n```jsx\nimport React from 'react';\nimport useWindowSize from '.\u002FuseWindowSize';\n\nfunction MyComponent() {\n const { width, height } = useWindowSize();\n\n return (\n \u003Cdiv>\n \u003Cp>Window width: {width}\u003C\u002Fp>\n \u003Cp>Window height: {height}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n\nexport default MyComponent;\n```\n\n在这个例子中，`useWindowSize` 自定义 Hook 提供了窗口的宽度和高度，任何组件都可以使用该 Hook 以便实时响应窗口大小的变化。\n\n---\n\n### 2. **通过自定义 Hooks 提高代码复用性**\n\n在实际开发中，不同组件中常常会有一些重复的逻辑（如 API 请求、表单处理、计时器等），自定义 Hooks 可以将这些逻辑提取出来，实现代码复用。\n\n#### 示例：自定义 Hook 处理 API 请求\n\n```jsx\nimport { useState, useEffect } from 'react';\n\n\u002F\u002F 自定义 Hook: useFetch\nfunction useFetch(url) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n try {\n const response = await fetch(url);\n const result = await response.json();\n setData(result);\n } catch (error) {\n setError(error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchData();\n }, [url]);\n\n return { data, loading, error };\n}\n\nexport default useFetch;\n```\n\n#### 使用 `useFetch` 自定义 Hook 进行数据请求\n\n```jsx\nimport React from 'react';\nimport useFetch from '.\u002FuseFetch';\n\nfunction DataDisplay() {\n const { data, loading, error } = useFetch('https:\u002F\u002Fapi.example.com\u002Fdata');\n\n if (loading) return \u003Cp>Loading...\u003C\u002Fp>;\n if (error) return \u003Cp>Error: {error.message}\u003C\u002Fp>;\n\n return (\n \u003Cul>\n {data.map(item => (\n \u003Cli key={item.id}>{item.name}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n\nexport default DataDisplay;\n```\n\n- **自定义 Hook `useFetch`**：将 API 请求和错误处理的逻辑抽离出来，可以在任何需要请求数据的组件中复用这一逻辑。\n- **代码复用性**：所有需要请求 API 数据的组件都可以直接使用 `useFetch`，不需要重复编写请求逻辑，且保持了逻辑的一致性。\n\n---\n\n### 3. **封装第三方库的自定义 Hooks**\n\n很多时候我们使用第三方库进行一些复杂的操作，比如状态管理库、动画库、或者表单库。为了更好地集成这些第三方库，我们可以封装它们的逻辑到自定义 Hooks 中。\n\n#### 示例：封装 `localStorage` 操作的自定义 Hook\n\n浏览器的 `localStorage` 是一个常用的 API，用于持久化数据。我们可以将其操作封装成一个自定义 Hook。\n\n```jsx\nimport { useState } from 'react';\n\n\u002F\u002F 自定义 Hook: useLocalStorage\nfunction useLocalStorage(key, initialValue) {\n const [storedValue, setStoredValue] = useState(() => {\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n console.log(error);\n return initialValue;\n }\n });\n\n const setValue = (value) => {\n try {\n const valueToStore = value instanceof Function ? value(storedValue) : value;\n setStoredValue(valueToStore);\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n console.log(error);\n }\n };\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n```\n\n#### 使用 `useLocalStorage` 自定义 Hook\n\n```jsx\nimport React from 'react';\nimport useLocalStorage from '.\u002FuseLocalStorage';\n\nfunction Preferences() {\n const [theme, setTheme] = useLocalStorage('theme', 'light');\n\n return (\n \u003Cdiv>\n \u003Ch1>Theme: {theme}\u003C\u002Fh1>\n \u003Cbutton onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n Toggle Theme\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default Preferences;\n```\n\n- **自定义 Hook `useLocalStorage`**：封装了 `localStorage` 的读写逻辑，使得在组件中操作持久化数据更加方便。\n- **第三方库的集成**：封装第三方库时，自定义 Hooks 是一个理想的工具，可以根据需要调整其接口。\n\n---\n\n#### 使用第三方状态管理库封装自定义 Hook\n\n以 Redux 为例，可以封装自定义 Hook 来简化使用 Redux 的流程。\n\n```jsx\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment, decrement } from '.\u002FcounterSlice';\n\n\u002F\u002F 自定义 Hook: useCounter\nexport function useCounter() {\n const count = useSelector((state) => state.counter.value);\n const dispatch = useDispatch();\n\n const incrementCount = () => dispatch(increment());\n const decrementCount = () => dispatch(decrement());\n\n return { count, incrementCount, decrementCount };\n}\n```\n\n#### 使用 `useCounter` 自定义 Hook\n\n```jsx\nimport React from 'react';\nimport { useCounter } from '.\u002FuseCounter';\n\nfunction CounterComponent() {\n const { count, incrementCount, decrementCount } = useCounter();\n\n return (\n \u003Cdiv>\n \u003Ch1>Count: {count}\u003C\u002Fh1>\n \u003Cbutton onClick={incrementCount}>Increment\u003C\u002Fbutton>\n \u003Cbutton onClick={decrementCount}>Decrement\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport default CounterComponent;\n```\n\n- **封装 Redux 逻辑**：通过 `useCounter` 将 Redux 的 `dispatch` 和 `useSelector` 简化为一个自定义 Hook，使得状态管理更加直观和易于使用。\n\n---\n\n### 总结\n\n1. **自定义 Hooks** 是复用 React 组件逻辑的强大工具。通过将常用的逻辑抽象成 Hooks，不同组件可以共享相同的逻辑，而不需要重复编写代码。\n2. **提高代码复用性**：无论是管理窗口大小、处理 API 请求，还是与第三方库集成，自定义 Hooks 都能够帮助我们将逻辑抽象和复用。\n3. **封装第三方库**：自定义 Hooks 也可以用于封装第三方库的使用，帮助我们更好地集成外部功能，并将复杂的逻辑封装成易用的接口。\n\n通过这些技巧，可以显著提升代码的可读性和维护性，在不同项目中实现逻辑共享和抽象。\n",{"id":118,"created_at":119,"updated_at":119,"code":120,"author_id":7,"book_id":4,"slug":121,"article_id":122,"title":123,"sort_order":118,"content":124,"status":12},116,"2024-09-21T14:10:12.834+08:00","vOK2O56p","react-服务端渲染-ssr-116",529,"React 服务端渲染 (SSR)","### **React 服务端渲染 (SSR)**\n\n#### 1. **什么是服务端渲染 (SSR)**\n\nReact 默认采用的是客户端渲染（CSR, Client-Side Rendering），即浏览器下载完 JavaScript 代码后，在客户端生成页面内容。与此相对的**服务端渲染（SSR, Server-Side Rendering）**是在服务器端将 React 组件预先渲染成 HTML，再将该 HTML 页面发送给客户端。这样，用户在初次访问页面时，会立刻看到完整的页面内容，而不是等待 JavaScript 加载和执行。\n\n**SSR 的优势**：\n\n- **提高首屏加载速度**：服务端直接生成 HTML 页面，避免了用户看到空白页面或“加载中”状态，首屏渲染速度大大提升。\n- **SEO 优化**：爬虫无法很好地处理客户端渲染内容，而 SSR 直接提供 HTML，有助于搜索引擎优化（SEO）。\n\n---\n\n### **Next.js 基础知识与使用**\n\n[Next.js](https:\u002F\u002Fnextjs.org\u002F) 是一个基于 React 的框架，专为服务端渲染（SSR）和静态网站生成（SSG）而设计。它为 React 提供了许多增强功能，包括 SSR、SSG、增量静态生成（ISR）等。\n\n#### 2. **Next.js 核心概念与功能**\n\n1. **文件系统路由**：\n\n - 在 Next.js 中，文件夹和文件名直接对应路由。所有放在 `pages\u002F` 文件夹中的 `.js` 文件都会自动变为页面路由。\n\n **示例**：\n\n ```bash\n pages\u002F\n ├── index.js # 对应 `\u002F` 路由\n ├── about.js # 对应 `\u002Fabout` 路由\n └── blog\u002F\n └── [id].js # 动态路由，对应 `\u002Fblog\u002F:id`\n ```\n2. **预渲染**：\n\n - **服务端渲染 (SSR)**：在每次请求时，页面在服务器端渲染，然后返回给客户端。\n - **静态生成 (SSG)**：在构建时生成 HTML 文件，之后直接提供静态文件以供用户访问。\n - **增量静态生成 (ISR)**：静态生成的页面可以根据指定时间或条件进行增量更新，以保持内容最新。\n3. **API 路由**：\n\n - Next.js 支持在 `pages\u002Fapi\u002F` 目录中创建 API 路由。你可以使用这些路由来处理 HTTP 请求，构建 API 服务。\n\n **示例**：\n\n ```bash\n pages\u002Fapi\u002F\n ├── hello.js # 通过 `\u002Fapi\u002Fhello` 访问\n ```\n4. **内置 CSS 和 CSS-in-JS**：\n\n - 支持直接在组件中引入 CSS 文件，也可以使用 styled-jsx、CSS Modules 等样式解决方案。\n\n---\n\n#### 3. **SSR 使用示例**\n\n在 Next.js 中，可以通过 `getServerSideProps` 方法来实现服务端渲染：\n\n```jsx\n\u002F\u002F pages\u002Findex.js\nimport React from 'react';\n\nfunction Home({ data }) {\n return (\n \u003Cdiv>\n \u003Ch1>SSR 页面\u003C\u002Fh1>\n \u003Cp>{data.message}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F 每次请求都会运行，生成 HTML\nexport async function getServerSideProps() {\n \u002F\u002F 调用外部 API，获取数据\n const res = await fetch('https:\u002F\u002Fapi.example.com\u002Fdata');\n const data = await res.json();\n\n return {\n props: { data }, \u002F\u002F 传递给页面的 props\n };\n}\n\nexport default Home;\n```\n\n- `getServerSideProps`：每次页面请求时，Next.js 都会先在服务器端运行这个函数，获取数据并将其作为 props 传递给页面组件，从而实现服务端渲染。\n\n---\n\n### **静态站点生成 (SSG) 和增量静态生成 (ISR)**\n\n#### 4. **静态站点生成 (SSG)**\n\n静态站点生成是在构建时生成静态 HTML 页面，之后这些页面会直接提供给用户访问。相比于 SSR，SSG 页面在构建时生成，因此没有额外的服务器开销。\n\n在 Next.js 中，使用 `getStaticProps` 函数来实现 SSG：\n\n```jsx\n\u002F\u002F pages\u002Findex.js\nimport React from 'react';\n\nfunction Home({ data }) {\n return (\n \u003Cdiv>\n \u003Ch1>SSG 页面\u003C\u002Fh1>\n \u003Cp>{data.message}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F 只在构建时执行一次，生成静态页面\nexport async function getStaticProps() {\n \u002F\u002F 调用外部 API，获取数据\n const res = await fetch('https:\u002F\u002Fapi.example.com\u002Fdata');\n const data = await res.json();\n\n return {\n props: { data }, \u002F\u002F 传递给页面的 props\n };\n}\n\nexport default Home;\n```\n\n- **特点**：页面内容在构建时生成，适用于内容较为静态的网站，如博客、文档等。\n\n---\n\n#### 5. **增量静态生成 (ISR)**\n\n增量静态生成 (ISR, Incremental Static Regeneration) 是 Next.js 结合了 SSG 和 SSR 的一种渲染方式。它允许在构建后生成的静态页面根据需求进行更新，而不需要重新构建整个网站。\n\n通过 `getStaticProps` 中的 `revalidate` 属性，可以实现页面的定期更新。\n\n```jsx\n\u002F\u002F pages\u002Findex.js\nimport React from 'react';\n\nfunction Home({ data }) {\n return (\n \u003Cdiv>\n \u003Ch1>ISR 页面\u003C\u002Fh1>\n \u003Cp>{data.message}\u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F 静态生成，且每 10 秒更新一次\nexport async function getStaticProps() {\n const res = await fetch('https:\u002F\u002Fapi.example.com\u002Fdata');\n const data = await res.json();\n\n return {\n props: { data },\n revalidate: 10, \u002F\u002F 每 10 秒重新生成页面\n };\n}\n\nexport default Home;\n```\n\n- **`revalidate` 属性**：指定页面每隔多少秒重新生成一次，这样可以保持页面内容的更新，而不需要在每次请求时都重新渲染页面。\n- **适用场景**：ISR 适用于需要频繁更新的内容，如新闻、博客列表，但不需要实时性极高的页面。\n\n---\n\n### **SEO 优化**\n\n#### 6. **服务端渲染与 SEO**\n\nSSR 是优化搜索引擎排名（SEO）的有效方式。因为搜索引擎爬虫在抓取页面时无法很好地解析 JavaScript，所以 SSR 可以直接将完整的 HTML 提供给爬虫，提高页面的可见性和排名。\n\n#### 7. **Next.js 内置的 SEO 支持**\n\nNext.js 提供了强大的 SEO 工具，可以方便地为每个页面设置元数据：\n\n- **Next.js 的 `Head` 组件**：允许你在页面中自定义 `\u003Chead>` 标签，添加元标签（meta tags）、标题、描述等。\n\n```jsx\nimport Head from 'next\u002Fhead';\n\nfunction HomePage() {\n return (\n \u003C>\n \u003CHead>\n \u003Ctitle>我的博客\u003C\u002Ftitle>\n \u003Cmeta name=\"description\" content=\"这是我的博客，欢迎阅读。\" \u002F>\n \u003Cmeta name=\"keywords\" content=\"博客,Next.js,React\" \u002F>\n \u003C\u002FHead>\n \u003Ch1>欢迎来到我的博客\u003C\u002Fh1>\n \u003C\u002F>\n );\n}\n\nexport default HomePage;\n```\n\n- **动态生成的 SEO 元数据**：你可以根据页面内容动态生成元数据，确保每个页面都有唯一的标题和描述，提升 SEO 效果。\n\n---\n\n### **Next.js 其他高级功能**\n\n#### 8. **图像优化**\n\nNext.js 提供了内置的图像优化功能，通过 `next\u002Fimage` 组件，自动实现图像的延迟加载、自动格式选择（如 WebP）和优化等。\n\n```jsx\nimport Image from 'next\u002Fimage';\n\nfunction MyPage() {\n return (\n \u003Cdiv>\n \u003CImage src=\"\u002Fpath\u002Fto\u002Fimage.jpg\" alt=\"图片描述\" width={500} height={300} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\nexport default MyPage;\n```\n\n#### 9. **API 路由**\n\n除了页面路由，Next.js 还支持 API 路由，你可以轻松创建后端 API，和前端 React 组件一起工作。API 路由可以处理如表单提交、数据库交互等。\n\n```js\n\u002F\u002F pages\u002Fapi\u002Fhello.js\nexport default function handler(req, res) {\n res.status(200).json({ message: 'Hello from API' });\n}\n```\n\n---\n\n### **总结**\n\n- **SSR (服务端渲染)**：在服务器端生成 HTML，有助于 SEO 并提高页面首屏加载速度。\n- **SSG (静态站点生成)**：在构建时生成静态 HTML，适用于内容变化不频繁的网站，性能更好。\n- **ISR (增量静态生成)**：结合 SSR 和 SSG，允许静态页面根据需要进行更新，适用于需要频繁更新的内容。\n- **Next.js** 提供了文件系统路由、API 路由、图像\n\n优化等许多实用功能，并且通过 `Head` 组件和内置的 SSR\u002FSSG 支持，极大地简化了 SEO 优化和页面性能优化的过程。\n\n通过学习 Next.js，开发者可以轻松实现高效的 React 服务端渲染和静态站点生成，提升应用的用户体验与搜索引擎优化能力。\n",{"id":126,"created_at":127,"updated_at":127,"code":128,"author_id":7,"book_id":4,"slug":129,"article_id":130,"title":131,"sort_order":126,"content":132,"status":12},117,"2024-09-22T13:22:21.07+08:00","1l8O4RXD","高级状态管理工具-117",530,"高级状态管理工具","在 React 生态系统中，状态管理一直是一个关键问题。除了最广泛使用的 Redux，还有一些替代的状态管理工具，如 MobX、Recoil 和 Zustand，它们提供了不同的解决方案和设计理念。以下是对这些工具的详细介绍及其使用场景。\n\n---\n\n### **MobX**\n\n#### 1. **MobX 概述**\n\nMobX 是一个强大的响应式状态管理库，它的设计理念是**自动追踪状态依赖关系**，从而简化状态的更新和管理。与 Redux 的“不可变状态和纯函数”的理念不同，MobX 允许你使用**可变状态**，其核心是通过“观察者模式”来自动跟踪和响应状态的变化。\n\n#### 2. **MobX 核心概念**\n\n- **observable（可观察状态）**：标记为 `observable` 的状态可以被追踪和响应。当状态改变时，依赖该状态的组件会自动重新渲染。\n- **action（动作）**：用于改变 `observable` 状态的函数。\n- **computed（计算值）**：从现有状态派生的值，它们是依赖于其他 `observable` 的动态值。\n- **observer（观察者组件）**：MobX 提供的高阶组件，自动将组件与状态关联起来。状态变化时，组件会自动更新。\n\n#### 3. **MobX 使用示例**\n\n```jsx\nimport { makeAutoObservable } from 'mobx';\nimport { observer } from 'mobx-react-lite';\nimport React from 'react';\n\n\u002F\u002F 定义 store\nclass TodoStore {\n todos = [];\n\n constructor() {\n makeAutoObservable(this); \u002F\u002F 自动跟踪 observable 状态\n }\n\n addTodo = (todo) => {\n this.todos.push(todo);\n }\n\n get completedTodosCount() {\n return this.todos.filter(todo => todo.completed).length;\n }\n}\n\n\u002F\u002F 创建一个实例\nconst todoStore = new TodoStore();\n\nconst TodoList = observer(() => {\n const { todos, addTodo, completedTodosCount } = todoStore;\n\n return (\n \u003Cdiv>\n \u003Ch1>Todos ({completedTodosCount} completed)\u003C\u002Fh1>\n \u003Cbutton onClick={() => addTodo({ text: 'New Task', completed: false })}>\n Add Todo\n \u003C\u002Fbutton>\n \u003Cul>\n {todos.map((todo, index) => (\n \u003Cli key={index}>{todo.text}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n});\n\nexport default TodoList;\n```\n\n**MobX 的优点**：\n\n- **响应式**：只要数据被标记为 `observable`，组件会自动监听变化并重新渲染，减少手动管理的工作。\n- **简洁**：使用可变状态，没有大量的样板代码。\n\n**MobX 的缺点**：\n\n- 可变状态管理在大型应用中可能导致状态变化的可预测性较差，增加调试复杂性。\n\n---\n\n### **Recoil**\n\n#### 1. **Recoil 概述**\n\nRecoil 是 Facebook 开发的一个轻量级状态管理库，它专为 React 设计，解决了 React 组件状态共享的问题，尤其适合于复杂的、具有嵌套组件的应用。Recoil 的核心是**原子（atom）**和**选择器（selector）**，它们分别表示最小状态单元和派生状态。\n\n#### 2. **Recoil 核心概念**\n\n- **Atom（原子）**：状态的最小单元，任何组件可以订阅 atom 的变化。\n- **Selector（选择器）**：从 atom 派生出来的状态，它可以是同步或异步计算的结果，类似于 MobX 的 `computed`。\n- **RecoilRoot**：所有使用 Recoil 状态的组件必须被 `RecoilRoot` 包裹。\n\n#### 3. **Recoil 使用示例**\n\n```jsx\nimport { atom, selector, useRecoilState, useRecoilValue } from 'recoil';\nimport { RecoilRoot } from 'recoil';\nimport React from 'react';\n\n\u002F\u002F 定义 atom\nconst todoListState = atom({\n key: 'todoListState', \u002F\u002F 唯一的 key\n default: [], \u002F\u002F 默认值\n});\n\n\u002F\u002F 定义 selector\nconst completedTodosCountState = selector({\n key: 'completedTodosCountState',\n get: ({ get }) => {\n const todoList = get(todoListState);\n return todoList.filter(todo => todo.completed).length;\n },\n});\n\nfunction TodoList() {\n const [todos, setTodos] = useRecoilState(todoListState);\n const completedTodosCount = useRecoilValue(completedTodosCountState);\n\n const addTodo = () => {\n setTodos([...todos, { text: 'New Task', completed: false }]);\n };\n\n return (\n \u003Cdiv>\n \u003Ch1>Todos ({completedTodosCount} completed)\u003C\u002Fh1>\n \u003Cbutton onClick={addTodo}>Add Todo\u003C\u002Fbutton>\n \u003Cul>\n {todos.map((todo, index) => (\n \u003Cli key={index}>{todo.text}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n\nexport default function App() {\n return (\n \u003CRecoilRoot>\n \u003CTodoList \u002F>\n \u003C\u002FRecoilRoot>\n );\n}\n```\n\n**Recoil 的优点**：\n\n- **细粒度控制**：Recoil 使用 atom 管理状态，允许细粒度的状态拆分和控制，避免不必要的组件重新渲染。\n- **状态的全局与局部化**：atom 可以全局共享，也可以局部管理，适应多种场景。\n\n**Recoil 的缺点**：\n\n- 目前 Recoil 仍处于快速发展阶段，在复杂应用场景下可能需要更多的稳定性和性能优化。\n\n---\n\n### **Zustand**\n\n#### 1. **Zustand 概述**\n\nZustand 是一个非常轻量的 React 状态管理库，使用简单，性能高效。它基于 hook API 提供了一个小而强大的状态管理解决方案，相比 Redux，它更加轻量，提供了更少的样板代码。Zustand 采用**可变状态**，允许你灵活地创建和更新状态。\n\n#### 2. **Zustand 核心概念**\n\n- **Store（状态库）**：Zustand 提供的状态库非常灵活，允许你定义状态和更新逻辑，任何组件都可以通过 hook 访问和更新状态。\n- **React Hooks API**：使用 `create` 函数创建 store，使用 `useStore` hook 来访问状态。\n\n#### 3. **Zustand 使用示例**\n\n```jsx\nimport create from 'zustand';\nimport React from 'react';\n\n\u002F\u002F 创建 store\nconst useStore = create((set) => ({\n todos: [],\n addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),\n completedTodosCount: () =>\n get().todos.filter((todo) => todo.completed).length,\n}));\n\nfunction TodoList() {\n const { todos, addTodo, completedTodosCount } = useStore();\n\n return (\n \u003Cdiv>\n \u003Ch1>Todos ({completedTodosCount()} completed)\u003C\u002Fh1>\n \u003Cbutton onClick={() => addTodo({ text: 'New Task', completed: false })}>\n Add Todo\n \u003C\u002Fbutton>\n \u003Cul>\n {todos.map((todo, index) => (\n \u003Cli key={index}>{todo.text}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n\nexport default TodoList;\n```\n\n**Zustand 的优点**：\n\n- **极简 API**：Zustand 非常轻量，几乎没有学习成本，代码简洁明了。\n- **无外部依赖**：与其他库不同，Zustand 不依赖 React Context，性能更高效。\n\n**Zustand 的缺点**：\n\n- 相比 Redux 等更成熟的库，Zustand 提供的功能较为基础，适合小型和中型应用，对于特别复杂的应用可能需要手动处理更多的状态管理逻辑。\n\n---\n\n### **总结**\n\n- **MobX**：适合需要响应式、可观察状态的项目，代码简洁，功能强大，但在复杂项目中可能导致调试困难。\n- **Recoil**：官方支持的状态管理库，适用于复杂的状态共享和嵌套组件场景，设计符合 React 哲学，未来潜力巨大。\n- **Zustand**：轻量、高效、灵活，适合小型或中型项目，提供简单的状态管理方案。\n\n这些工具各有优势，选择时应根据项目的规模、复杂性和状态管理需求来权衡。如果项目较小或状态管理需求简单，**Zustand** 是一个非常轻量的选择；如果是复杂项目，可以考虑 **MobX** 或 **Recoil**。\n",{"id":134,"created_at":135,"updated_at":135,"code":136,"author_id":7,"book_id":4,"slug":137,"article_id":138,"title":139,"sort_order":134,"content":140,"status":12},118,"2024-09-22T13:28:25.989+08:00","OeKLNM8b","ssr-的全栈电商应用-118",531,"SSR 的全栈电商应用","构建一个带有 **服务端渲染 (SSR)** 的全栈电商应用需要涉及到前端的 React、Next.js 框架、状态管理工具（如 Redux、MobX、Recoil、Zustand）、后端 API、数据库以及页面 SEO 优化等多个知识点。这个应用将具备商品展示、购物车、用户登录\u002F注册、订单管理等电商核心功能。\n\n下面是一个详细的构建指南，从项目结构、技术选型到具体实现。\n\n---\n\n### **项目结构规划**\n\n我们使用 **Next.js** 作为前端框架来处理 SSR，同时通过 **Next.js API 路由** 实现后端逻辑，数据库使用 **MongoDB** 进行商品、用户、订单等数据的存储和管理。状态管理可以根据项目的需求选择工具，本文以 **Zustand** 为例。\n\n#### 1. **项目结构**\n\n```bash\necommerce-app\u002F\n├── components\u002F # 复用的组件（如导航栏、商品卡片等）\n├── pages\u002F # Next.js 页面和路由\n│ ├── api\u002F # Next.js 后端 API 路由\n│ ├── index.js # 首页\n│ ├── product\u002F[id].js # 商品详情页\n│ ├── cart.js # 购物车页面\n│ └── checkout.js # 结账页面\n├── store\u002F # 状态管理（如 Zustand）\n├── utils\u002F # 工具函数\n├── public\u002F # 静态资源（如图片、图标等）\n├── styles\u002F # 样式文件\n├── .env # 环境变量\n├── package.json # 项目依赖\n└── next.config.js # Next.js 配置\n```\n\n---\n\n### **技术选型**\n\n1. **前端框架**：Next.js（用于 SSR 和路由处理）\n2. **后端 API**：Next.js API Routes（处理登录、注册、商品、订单等业务逻辑）\n3. **状态管理**：Zustand（轻量状态管理）\n4. **数据库**：MongoDB（使用 Mongoose 进行数据交互）\n5. **身份验证**：JWT（JSON Web Token）处理用户登录、注册\n6. **样式处理**：Tailwind CSS 或 Styled Components\n7. **支付集成**：Stripe 或其他支付平台\n\n---\n\n### **详细实现步骤**\n\n#### 1. **初始化项目**\n\n首先，使用 Next.js 创建项目：\n\n```bash\nnpx create-next-app ecommerce-app\ncd ecommerce-app\nnpm install zustand mongoose jsonwebtoken bcryptjs\n```\n\n- **Zustand**：用于状态管理。\n- **Mongoose**：用于 MongoDB 数据交互。\n- **jsonwebtoken 和 bcryptjs**：用于用户认证和密码加密。\n\n---\n\n#### 2. **设计状态管理 (Zustand)**\n\n在 `\u002Fstore` 文件夹中创建 `cartStore.js` 和 `userStore.js` 用于管理购物车和用户状态。\n\n```javascript\n\u002F\u002F \u002Fstore\u002FcartStore.js\nimport create from 'zustand';\n\nconst useCartStore = create((set) => ({\n cart: [],\n addToCart: (product) =>\n set((state) => ({\n cart: [...state.cart, product],\n })),\n removeFromCart: (id) =>\n set((state) => ({\n cart: state.cart.filter((item) => item.id !== id),\n })),\n}));\n\nexport default useCartStore;\n```\n\n```javascript\n\u002F\u002F \u002Fstore\u002FuserStore.js\nimport create from 'zustand';\n\nconst useUserStore = create((set) => ({\n user: null,\n setUser: (userData) => set({ user: userData }),\n logout: () => set({ user: null }),\n}));\n\nexport default useUserStore;\n```\n\n---\n\n#### 3. **构建商品展示页面**\n\n在 `pages\u002Findex.js` 中，展示商品列表并使用 **SSR** 来获取商品数据。\n\n```javascript\n\u002F\u002F \u002Fpages\u002Findex.js\nimport React from 'react';\nimport Link from 'next\u002Flink';\n\nexport default function Home({ products }) {\n return (\n \u003Cdiv>\n \u003Ch1>欢迎来到电商平台\u003C\u002Fh1>\n \u003Cdiv className=\"product-list\">\n {products.map((product) => (\n \u003Cdiv key={product._id} className=\"product-item\">\n \u003CLink href={`\u002Fproduct\u002F${product._id}`}>\n \u003Ca>\n \u003Ch2>{product.name}\u003C\u002Fh2>\n \u003Cp>Price: ${product.price}\u003C\u002Fp>\n \u003C\u002Fa>\n \u003C\u002FLink>\n \u003C\u002Fdiv>\n ))}\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F SSR: 获取所有商品数据\nexport async function getServerSideProps() {\n const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}\u002Fapi\u002Fproducts`);\n const products = await res.json();\n\n return {\n props: { products }, \u002F\u002F 传递到组件\n };\n}\n```\n\n---\n\n#### 4. **实现后端 API 路由**\n\n在 `pages\u002Fapi\u002Fproducts.js` 中编写 API 逻辑来获取商品列表（使用 MongoDB 作为数据库）：\n\n```javascript\n\u002F\u002F \u002Fpages\u002Fapi\u002Fproducts.js\nimport dbConnect from '..\u002F..\u002Futils\u002FdbConnect';\nimport Product from '..\u002F..\u002Fmodels\u002FProduct';\n\nexport default async function handler(req, res) {\n await dbConnect();\n\n if (req.method === 'GET') {\n const products = await Product.find({});\n res.status(200).json(products);\n } else {\n res.status(400).json({ error: 'This method is not supported' });\n }\n}\n```\n\n- **dbConnect.js** 用于连接 MongoDB：\n\n```javascript\n\u002F\u002F \u002Futils\u002FdbConnect.js\nimport mongoose from 'mongoose';\n\nconst MONGODB_URI = process.env.MONGODB_URI;\n\nif (!MONGODB_URI) {\n throw new Error('Please define the MONGODB_URI environment variable');\n}\n\nlet cached = global.mongoose;\n\nif (!cached) {\n cached = global.mongoose = { conn: null, promise: null };\n}\n\nasync function dbConnect() {\n if (cached.conn) {\n return cached.conn;\n }\n\n if (!cached.promise) {\n cached.promise = mongoose.connect(MONGODB_URI).then((mongoose) => {\n return mongoose;\n });\n }\n\n cached.conn = await cached.promise;\n return cached.conn;\n}\n\nexport default dbConnect;\n```\n\n- **Product 模型**：\n\n```javascript\n\u002F\u002F \u002Fmodels\u002FProduct.js\nimport mongoose from 'mongoose';\n\nconst ProductSchema = new mongoose.Schema({\n name: { type: String, required: true },\n price: { type: Number, required: true },\n description: { type: String, required: true },\n});\n\nexport default mongoose.models.Product || mongoose.model('Product', ProductSchema);\n```\n\n---\n\n#### 5. **构建商品详情页**\n\n在 `pages\u002Fproduct\u002F[id].js` 中展示每个商品的详细信息。\n\n```javascript\n\u002F\u002F \u002Fpages\u002Fproduct\u002F[id].js\nimport { useRouter } from 'next\u002Frouter';\nimport useCartStore from '..\u002F..\u002Fstore\u002FcartStore';\n\nexport default function ProductPage({ product }) {\n const addToCart = useCartStore((state) => state.addToCart);\n\n return (\n \u003Cdiv>\n \u003Ch1>{product.name}\u003C\u002Fh1>\n \u003Cp>{product.description}\u003C\u002Fp>\n \u003Cp>Price: ${product.price}\u003C\u002Fp>\n \u003Cbutton onClick={() => addToCart(product)}>Add to Cart\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\nexport async function getServerSideProps(context) {\n const { id } = context.params;\n const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}\u002Fapi\u002Fproducts\u002F${id}`);\n const product = await res.json();\n\n return {\n props: { product },\n };\n}\n```\n\n---\n\n#### 6. **用户登录和身份验证**\n\n在 `pages\u002Fapi\u002Fauth\u002Flogin.js` 中处理用户登录逻辑，并生成 JWT。\n\n```javascript\n\u002F\u002F \u002Fpages\u002Fapi\u002Fauth\u002Flogin.js\nimport dbConnect from '..\u002F..\u002F..\u002Futils\u002FdbConnect';\nimport User from '..\u002F..\u002F..\u002Fmodels\u002FUser';\nimport bcrypt from 'bcryptjs';\nimport jwt from 'jsonwebtoken';\n\nexport default async function handler(req, res) {\n await dbConnect();\n\n const { email, password } = req.body;\n\n const user = await User.findOne({ email });\n if (!user) return res.status(400).json({ message: 'User not found' });\n\n const isMatch = await bcrypt.compare(password, user.password);\n if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });\n\n const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });\n\n res.status(200).json({ token });\n}\n```\n\n- 使用 JWT 来验证用户请求的合法性，例如访问订单页面或创建新订单时，需要用户先登录。\n\n---\n\n#### 7. **购物车和结账功能**\n\n在 `pages\u002Fcart.js` 和 `pages\u002Fcheckout.js` 中分别实现购物车查看和结账逻辑。用户可以将商品添加到购物车，在结账页面输入支付信息，完成支付后生成订单。\n\n下面是 `pages\u002Fcart.js` 和 `pages\u002Fcheckout.js` 的代码实现，结合了购物车的状态管理和支付功能。支付部分集成了 **支付宝** 和 **微信支付**，通过支付 API 来完成交易。在真实项目中，支付通常涉及到后端服务器与支付服务的集成，因此前端代码会通过后端 API 来处理支付请求。\n\n为了简化，我们假设你已经在后端集成了支付宝和微信支付的 SDK，前端通过发起支付请求来跳转到相应的支付页面。\n\n---\n\n##### **1). Cart Page (`pages\u002Fcart.js`)**\n\n`cart.js` 页面展示了用户已添加到购物车的商品，用户可以查看商品列表、删除商品，并跳转到结账页面。\n\n```javascript\n\u002F\u002F \u002Fpages\u002Fcart.js\nimport React from 'react';\nimport Link from 'next\u002Flink';\nimport useCartStore from '..\u002Fstore\u002FcartStore';\n\nexport default function Cart() {\n const { cart, removeFromCart } = useCartStore();\n\n \u002F\u002F 计算总价\n const totalPrice = cart.reduce((total, item) => total + item.price, 0);\n\n return (\n \u003Cdiv className=\"cart-page\">\n \u003Ch1>Your Cart\u003C\u002Fh1>\n {cart.length === 0 ? (\n \u003Cp>Your cart is empty.\u003C\u002Fp>\n ) : (\n \u003C>\n \u003Cul>\n {cart.map((item, index) => (\n \u003Cli key={index} className=\"cart-item\">\n \u003Ch2>{item.name}\u003C\u002Fh2>\n \u003Cp>Price: ${item.price}\u003C\u002Fp>\n \u003Cbutton onClick={() => removeFromCart(item.id)}>Remove\u003C\u002Fbutton>\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003Ch2>Total: ${totalPrice}\u003C\u002Fh2>\n \u003CLink href=\"\u002Fcheckout\">\n \u003Cbutton>Proceed to Checkout\u003C\u002Fbutton>\n \u003C\u002FLink>\n \u003C\u002F>\n )}\n \u003C\u002Fdiv>\n );\n}\n```\n\n---\n\n##### **2). Checkout Page (`pages\u002Fcheckout.js`)**\n\n`checkout.js` 页面展示结账信息，用户可以选择支付方式（支付宝或微信），并跳转到支付页面。在点击支付按钮时，页面会发送一个请求到后端，后端处理支付宝或微信支付的订单创建，并返回支付链接。\n\n```javascript\n\u002F\u002F \u002Fpages\u002Fcheckout.js\nimport React, { useState } from 'react';\nimport useCartStore from '..\u002Fstore\u002FcartStore';\nimport axios from 'axios';\nimport { useRouter } from 'next\u002Frouter';\n\nexport default function Checkout() {\n const { cart } = useCartStore();\n const [paymentMethod, setPaymentMethod] = useState('');\n const [loading, setLoading] = useState(false);\n const router = useRouter();\n\n \u002F\u002F 计算总价\n const totalPrice = cart.reduce((total, item) => total + item.price, 0);\n\n \u002F\u002F 发起支付请求\n const handlePayment = async () => {\n if (!paymentMethod) {\n alert('Please select a payment method');\n return;\n }\n\n setLoading(true);\n\n try {\n const response = await axios.post('\u002Fapi\u002Fpay', {\n cart,\n totalPrice,\n paymentMethod,\n });\n\n if (response.data.paymentUrl) {\n \u002F\u002F 跳转到支付页面\n window.location.href = response.data.paymentUrl;\n }\n } catch (error) {\n console.error('Payment error:', error);\n alert('Payment failed, please try again.');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n \u003Cdiv className=\"checkout-page\">\n \u003Ch1>Checkout\u003C\u002Fh1>\n {cart.length === 0 ? (\n \u003Cp>Your cart is empty.\u003C\u002Fp>\n ) : (\n \u003C>\n \u003Ch2>Total: ${totalPrice}\u003C\u002Fh2>\n\n {\u002F* 支付方式选择 *\u002F}\n \u003Cdiv>\n \u003Ch3>Select Payment Method\u003C\u002Fh3>\n \u003Clabel>\n \u003Cinput\n type=\"radio\"\n name=\"paymentMethod\"\n value=\"alipay\"\n checked={paymentMethod === 'alipay'}\n onChange={() => setPaymentMethod('alipay')}\n \u002F>\n 支付宝\n \u003C\u002Flabel>\n \u003Clabel>\n \u003Cinput\n type=\"radio\"\n name=\"paymentMethod\"\n value=\"wechat\"\n checked={paymentMethod === 'wechat'}\n onChange={() => setPaymentMethod('wechat')}\n \u002F>\n 微信支付\n \u003C\u002Flabel>\n \u003C\u002Fdiv>\n\n {\u002F* 支付按钮 *\u002F}\n \u003Cbutton onClick={handlePayment} disabled={loading}>\n {loading ? 'Processing...' : 'Pay Now'}\n \u003C\u002Fbutton>\n \u003C\u002F>\n )}\n \u003C\u002Fdiv>\n );\n}\n```\n\n---\n\n##### **3). 支付 API 路由 (`pages\u002Fapi\u002Fpay.js`)**\n\n后端支付 API 负责与支付宝和微信支付服务器通信，创建支付订单，并返回支付链接。以下是一个示例，其中假设你已经配置了支付宝和微信支付的 SDK，并且使用后端来生成支付订单。\n\n```javascript\n\u002F\u002F \u002Fpages\u002Fapi\u002Fpay.js\nimport axios from 'axios';\n\nexport default async function handler(req, res) {\n const { cart, totalPrice, paymentMethod } = req.body;\n\n if (!cart || cart.length === 0) {\n return res.status(400).json({ message: 'Cart is empty' });\n }\n\n \u002F\u002F 根据支付方式生成不同的支付订单\n let paymentUrl = '';\n\n try {\n if (paymentMethod === 'alipay') {\n \u002F\u002F 调用支付宝 API 生成支付订单\n const alipayResponse = await axios.post('https:\u002F\u002Fapi.alipay.com\u002Fpay', {\n amount: totalPrice,\n \u002F\u002F 其他支付宝订单参数\n });\n paymentUrl = alipayResponse.data.paymentUrl;\n } else if (paymentMethod === 'wechat') {\n \u002F\u002F 调用微信支付 API 生成支付订单\n const wechatResponse = await axios.post('https:\u002F\u002Fapi.wechat.com\u002Fpay', {\n amount: totalPrice,\n \u002F\u002F 其他微信支付订单参数\n });\n paymentUrl = wechatResponse.data.paymentUrl;\n }\n\n \u002F\u002F 返回支付页面 URL\n res.status(200).json({ paymentUrl });\n } catch (error) {\n console.error('Payment error:', error);\n res.status(500).json({ message: 'Payment failed' });\n }\n}\n```\n\n---\n\n##### **支付集成概述**\n\n1. **前端 (Checkout Page)**：\n\n - 用户选择支付方式（支付宝或微信支付）。\n - 点击“支付”按钮时，前端发送一个请求到后端，后端创建支付订单并返回支付链接。\n2. **后端 (API Route)**：\n\n - 根据支付方式调用相应的支付 API（支付宝或微信支付）。\n - 返回支付链接，用户跳转到第三方支付页面进行支付。\n\n---\n\n##### **集成支付平台**\n\n- **支付宝支付**：你可以通过支付宝官方的 [Alipay API](https:\u002F\u002Fopendocs.alipay.com\u002Fapis) 进行支付集成，支付宝会提供支付 SDK 和 API。\n- **微信支付**：同样，你可以通过 [微信支付 API](https:\u002F\u002Fpay.weixin.qq.com\u002Fwiki\u002Fdoc\u002Fapiv3\u002F) 来集成微信支付服务。\n\n---\n\n#### 8. **SEO 优化**\n\n- 使用 Next.js 的 `Head` 组件为每个页面设置适当的标题、描述和关键字，提升 SEO 排名。\n\n```jsx\nimport Head from 'next\u002Fhead';\n\nexport default function ProductPage({ product }) {\n return (\n \u003C>\n \u003CHead>\n \u003Ctitle>{product.name} - 电商平台\u003C\u002Ftitle\n\n>\n \u003Cmeta name=\"description\" content={product.description} \u002F>\n \u003C\u002FHead>\n \u003Cdiv>\n {\u002F* 商品详细信息 *\u002F}\n \u003C\u002Fdiv>\n \u003C\u002F>\n );\n}\n```\n\n---\n\n### **总结**\n\n这个全栈电商应用示例涵盖了从前端 React 和 Next.js 到后端 API 路由和 MongoDB 数据库的完整技术栈，支持服务端渲染（SSR）和 SEO 优化。应用中的关键功能包括商品展示、购物车、用户认证、结账和订单管理等。\n",{"id":142,"created_at":143,"updated_at":143,"code":144,"author_id":7,"book_id":4,"slug":145,"article_id":146,"title":147,"sort_order":142,"content":148,"status":12},119,"2024-09-22T13:43:04.388+08:00","1VXnkwKq","构建大型应用-119",532,"构建大型应用","在构建大型 React 应用时，项目结构、模块化管理、性能优化、前端缓存策略以及设计模式的合理应用至关重要。以下是详细的说明和建议，包括 Monorepo 管理、项目结构设计、模块化、设计模式的应用，以及前端缓存和优化策略。\n\n---\n\n### **1. React 项目结构和模块化**\n\n在大型应用中，清晰的项目结构和模块化非常重要，可以帮助团队成员理解和维护代码。以下是常见的项目结构和模块化策略。\n\n#### **推荐项目结构**\n\n```bash\nmy-react-app\u002F\n├── public\u002F # 公共静态资源\n├── src\u002F\n│ ├── components\u002F # 公共组件（UI组件库）\n│ ├── containers\u002F # 容器组件（逻辑组件）\n│ ├── features\u002F # 按功能模块划分的业务逻辑\n│ │ ├── auth\u002F # 例如：身份验证模块\n│ │ ├── products\u002F # 例如：产品管理模块\n│ │ ├── cart\u002F # 例如：购物车模块\n│ ├── hooks\u002F # 自定义 Hooks\n│ ├── services\u002F # API 服务（如 Axios 请求等）\n│ ├── utils\u002F # 工具函数\n│ ├── store\u002F # 全局状态管理\n│ ├── styles\u002F # 样式文件\n│ ├── App.js # 根组件\n│ ├── index.js # 应用入口文件\n│ └── routes\u002F # 路由配置\n├── .env # 环境变量\n├── .gitignore\n├── package.json\n└── README.md\n```\n\n#### **模块化管理**\n\n将应用划分为多个模块，每个模块对应特定功能（如身份验证、商品管理等）。每个模块包含以下子文件夹：\n\n1. **Components**：存放当前模块内的展示组件。\n2. **Services**：模块相关的 API 服务请求。\n3. **Store**：使用 Redux 或 Zustand 等状态管理库时，管理模块的局部状态。\n\n```bash\nsrc\u002Ffeatures\u002Fproducts\u002F\n├── components\u002F # 产品模块相关的组件\n├── services\u002F # API 请求\n├── store\u002F # 局部状态\n└── ProductPage.js # 具体的页面逻辑\n```\n\n---\n\n### **2. 使用 Monorepo 管理大型项目**\n\n当应用体积变大，或者包含多个项目（如 Web 应用和后台管理系统），可以使用 **Monorepo** 来管理多个包。常见的工具有 **Lerna** 和 **Nx**。\n\n#### **Lerna**\n\n**Lerna** 是一个管理 JavaScript Monorepo 项目的工具，它可以帮助你管理多个项目的依赖，支持版本控制和发布多个包。\n\n##### **Lerna 安装与初始化**\n\n```bash\nnpx lerna init\n```\n\n#### **Lerna 的典型 Monorepo 项目结构**\n\n```bash\nmy-monorepo\u002F\n├── packages\u002F\n│ ├── app\u002F # 主应用\n│ ├── admin\u002F # 管理后台应用\n│ └── shared\u002F # 公共组件或工具库\n├── package.json # 根 package.json\n└── lerna.json # Lerna 配置文件\n```\n\n#### **Nx**\n\n**Nx** 是一个更强大的 Monorepo 工具，适用于管理复杂的前端和全栈项目。它提供了更强的模块化、缓存、构建加速等功能，非常适合大型团队协作。\n\n##### **Nx 安装与初始化**\n\n```bash\nnpx create-nx-workspace@latest\n```\n\n---\n\n### **3. React 设计模式：容器组件与展示组件**\n\n为了更好地组织代码，提升组件复用性，推荐使用**容器组件**和**展示组件**模式（也叫**智能组件**和**傻瓜组件**模式）。\n\n#### **展示组件**\n\n- 主要负责 UI 的渲染。\n- 不包含业务逻辑，数据通过 `props` 传递。\n- 可以通过状态管理库或父组件传递数据。\n\n```jsx\n\u002F\u002F ProductList.js (展示组件)\nconst ProductList = ({ products }) => (\n \u003Cul>\n {products.map((product) => (\n \u003Cli key={product.id}>{product.name}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n);\n\nexport default ProductList;\n```\n\n#### **容器组件**\n\n- 负责业务逻辑、数据获取和状态管理。\n- 将数据和回调函数传递给展示组件。\n\n```jsx\n\u002F\u002F ProductContainer.js (容器组件)\nimport React, { useState, useEffect } from 'react';\nimport ProductList from '.\u002FProductList';\nimport { fetchProducts } from '..\u002Fservices\u002FproductService';\n\nconst ProductContainer = () => {\n const [products, setProducts] = useState([]);\n\n useEffect(() => {\n fetchProducts().then((data) => setProducts(data));\n }, []);\n\n return \u003CProductList products={products} \u002F>;\n};\n\nexport default ProductContainer;\n```\n\n使用容器组件和展示组件分离 UI 和逻辑，不仅可以提高代码的复用性，还能让逻辑更加清晰，便于测试和维护。\n\n---\n\n### **4. 前端缓存策略与优化**\n\n#### **前端缓存策略**\n\n为了提升用户体验和减少网络请求次数，可以使用缓存策略。\n\n1. **浏览器缓存**：设置静态资源的 HTTP 头 `Cache-Control` 和 `Expires`，让浏览器缓存 CSS、JS 和图片文件。\n2. **Service Worker**：使用 PWA 的 **Service Worker** 来缓存页面和 API 请求，从而支持离线模式。\n3. **LocalStorage \u002F SessionStorage**：对于小型用户数据（如购物车、表单状态），可以使用浏览器的 `localStorage` 或 `sessionStorage` 进行持久化存储。\n4. **IndexedDB**：对于更复杂的数据结构，可以使用 `IndexedDB` 来存储大量数据，适用于大型离线应用。\n\n#### **前端优化策略**\n\n1. **代码分割（Code Splitting）**：使用 React 的 `React.lazy()` 和 `Suspense` 进行代码分割，按需加载组件，减少初始加载时间。\n\n ```javascript\n const ProductPage = React.lazy(() => import('.\u002FProductPage'));\n\n function App() {\n return (\n \u003CSuspense fallback={\u003Cdiv>Loading...\u003C\u002Fdiv>}>\n \u003CProductPage \u002F>\n \u003C\u002FSuspense>\n );\n }\n ```\n2. **性能优化：`useMemo` 和 `useCallback`**：避免不必要的渲染和函数重新创建。\n\n - **`useMemo`**：缓存计算结果，避免重复计算。\n - **`useCallback`**：缓存函数，防止每次渲染时创建新函数。\n\n ```javascript\n const memoizedValue = useMemo(() => expensiveComputation(data), [data]);\n const memoizedCallback = useCallback(() => doSomething(value), [value]);\n ```\n3. **Lazy Loading 图片和资源**：对于图片和非关键资源，可以使用 **懒加载** 技术，仅在需要时加载它们，减小初始加载体积。\n\n - 使用 `\u003Cimg loading=\"lazy\">` 或第三方库 **react-lazyload**。\n4. **Tree Shaking**：通过 Webpack 或者 Rollup 去除无用的代码，减小打包体积。\n5. **减少第三方库依赖**：尽量减少使用大型库或者没有必要的第三方库，保持项目轻量化。\n6. **SSR 和 SSG（静态站点生成）**：使用 Next.js 进行服务端渲染（SSR）或静态站点生成（SSG），提高页面首次加载速度，并利于 SEO。\n\n---\n\n### **总结**\n\n构建大型 React 应用时，需要综合考虑项目结构、模块化、状态管理、设计模式以及性能优化。使用 Monorepo 工具（如 Lerna 或 Nx）可以有效管理多个包和项目。通过合理使用设计模式（如容器组件和展示组件）可以提高组件复用性。前端缓存策略和优化措施（如代码分割、懒加载、缓存）则可以提升应用的性能和用户体验。\n",{"id":150,"created_at":151,"updated_at":151,"code":152,"author_id":7,"book_id":4,"slug":153,"article_id":154,"title":155,"sort_order":150,"content":156,"status":12},120,"2024-09-22T13:43:53.417+08:00","bM80ePXA","react-生态系统-120",533,"React 生态系统","在现代 React 开发中，生态系统中的多个工具、库和框架可以帮助提升代码质量、开发效率和项目的可维护性。以下是关于如何在 React 项目中使用 **TypeScript**、测试工具、**GraphQL** 和 **Apollo Client** 进行数据管理，以及与流行 UI 库集成的详细指南。\n\n---\n\n### **1. 使用 TypeScript 与 React 搭配开发**\n\n#### **为什么选择 TypeScript？**\n\nTypeScript 是 JavaScript 的超集，它增加了强类型系统，能在编译时捕获错误，增强代码的可维护性和开发体验，尤其适用于大型项目。\n\n#### **项目配置**\n\n你可以通过 `create-react-app` 快速创建 TypeScript 支持的 React 项目：\n\n```bash\nnpx create-react-app my-app --template typescript\n```\n\n或在现有项目中安装 TypeScript：\n\n```bash\nnpm install typescript @types\u002Freact @types\u002Freact-dom\n```\n\n#### **常见 TypeScript 和 React 示例**\n\n**定义类型：**\n你可以为组件的 `props` 和 `state` 定义类型。\n\n```tsx\ntype ProductProps = {\n name: string;\n price: number;\n};\n\nconst Product: React.FC\u003CProductProps> = ({ name, price }) => (\n \u003Cdiv>\n \u003Ch2>{name}\u003C\u002Fh2>\n \u003Cp>Price: ${price}\u003C\u002Fp>\n \u003C\u002Fdiv>\n);\n\nexport default Product;\n```\n\n**Hooks 与 TypeScript：**\n\n```tsx\nimport React, { useState } from 'react';\n\nconst Counter: React.FC = () => {\n const [count, setCount] = useState\u003Cnumber>(0);\n\n return (\n \u003Cdiv>\n \u003Cp>Count: {count}\u003C\u002Fp>\n \u003Cbutton onClick={() => setCount(count + 1)}>Increment\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n};\n\nexport default Counter;\n```\n\n通过 TypeScript，开发者可以避免很多类型相关的运行时错误，并且在代码重构时获得更好的类型提示和自动补全。\n\n---\n\n### **2. 测试工具：Jest 和 React Testing Library**\n\n#### **Jest**\n\nJest 是一个功能强大的 JavaScript 测试框架，支持单元测试、集成测试和快照测试。\n\n#### **React Testing Library**\n\nReact Testing Library 是专为 React 组件测试设计的库，旨在模拟用户行为，确保组件按照预期工作。\n\n#### **安装和配置**\n\nJest 通常已经在 `create-react-app` 中默认安装。如果没有，手动安装：\n\n```bash\nnpm install jest @testing-library\u002Freact @testing-library\u002Fjest-dom --save-dev\n```\n\n#### **示例测试代码**\n\n**测试组件渲染：**\n\n```tsx\nimport React from 'react';\nimport { render, screen } from '@testing-library\u002Freact';\nimport Product from '.\u002FProduct';\n\ntest('renders product name and price', () => {\n render(\u003CProduct name=\"Laptop\" price={999} \u002F>);\n \n expect(screen.getByText('Laptop')).toBeInTheDocument();\n expect(screen.getByText('$999')).toBeInTheDocument();\n});\n```\n\n**模拟用户交互：**\n\n```tsx\nimport React from 'react';\nimport { render, fireEvent } from '@testing-library\u002Freact';\nimport Counter from '.\u002FCounter';\n\ntest('increments counter when button is clicked', () => {\n const { getByText } = render(\u003CCounter \u002F>);\n \n const button = getByText('Increment');\n fireEvent.click(button);\n \n expect(getByText('Count: 1')).toBeInTheDocument();\n});\n```\n\n使用 Jest 和 React Testing Library，可以快速编写高效的测试，确保代码健壮性，并且在开发过程中捕获潜在的错误。\n\n---\n\n### **3. 使用 GraphQL 与 Apollo Client 进行数据管理**\n\n#### **GraphQL 概述**\n\nGraphQL 是一种灵活的数据查询语言，允许客户端精确查询所需数据，从而减少 API 请求的冗余数据传输。\n\n#### **Apollo Client**\n\nApollo Client 是一个功能强大的 GraphQL 客户端库，专为管理 React 应用的远程和本地数据而设计。\n\n#### **安装 Apollo Client**\n\n```bash\nnpm install @apollo\u002Fclient graphql\n```\n\n#### **配置 Apollo Client**\n\n你需要在项目中使用 Apollo Client Provider 来配置 GraphQL 连接。\n\n```tsx\n\u002F\u002F src\u002FapolloClient.ts\nimport { ApolloClient, InMemoryCache } from '@apollo\u002Fclient';\n\nconst client = new ApolloClient({\n uri: 'https:\u002F\u002Fexample.com\u002Fgraphql', \u002F\u002F 替换为你的 GraphQL API 地址\n cache: new InMemoryCache(),\n});\n\nexport default client;\n```\n\n在 `App.tsx` 中包裹 `ApolloProvider`：\n\n```tsx\nimport React from 'react';\nimport { ApolloProvider } from '@apollo\u002Fclient';\nimport client from '.\u002FapolloClient';\nimport ProductList from '.\u002Fcomponents\u002FProductList';\n\nfunction App() {\n return (\n \u003CApolloProvider client={client}>\n \u003CProductList \u002F>\n \u003C\u002FApolloProvider>\n );\n}\n\nexport default App;\n```\n\n#### **查询数据**\n\n```tsx\nimport { gql, useQuery } from '@apollo\u002Fclient';\n\nconst GET_PRODUCTS = gql`\n query GetProducts {\n products {\n id\n name\n price\n }\n }\n`;\n\nconst ProductList = () => {\n const { loading, error, data } = useQuery(GET_PRODUCTS);\n\n if (loading) return \u003Cp>Loading...\u003C\u002Fp>;\n if (error) return \u003Cp>Error :(\u003C\u002Fp>;\n\n return (\n \u003Cul>\n {data.products.map((product: any) => (\n \u003Cli key={product.id}>\n {product.name} - ${product.price}\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n};\n\nexport default ProductList;\n```\n\n通过 Apollo Client 与 GraphQL 的集成，可以高效地获取、缓存和管理远程数据，使数据获取过程更灵活。\n\n---\n\n### **4. 与流行 UI 库的集成**\n\n#### **Material-UI（MUI）**\n\nMaterial-UI 是一个流行的 React UI 库，提供了高度可定制的组件，并符合 Google 的 Material Design 规范。\n\n#### **安装 Material-UI**\n\n```bash\nnpm install @mui\u002Fmaterial @emotion\u002Freact @emotion\u002Fstyled\n```\n\n#### **使用示例**\n\n```tsx\nimport React from 'react';\nimport { Button, TextField } from '@mui\u002Fmaterial';\n\nconst MyForm = () => (\n \u003Cform>\n \u003CTextField label=\"Name\" variant=\"outlined\" \u002F>\n \u003CButton variant=\"contained\" color=\"primary\">\n Submit\n \u003C\u002FButton>\n \u003C\u002Fform>\n);\n\nexport default MyForm;\n```\n\n#### **Ant Design**\n\nAnt Design 是另一个广泛使用的 UI 库，提供了丰富的组件和强大的布局系统，特别适合企业级应用。\n\n#### **安装 Ant Design**\n\n```bash\nnpm install antd\n```\n\n#### **使用示例**\n\n```tsx\nimport React from 'react';\nimport { Button, Input } from 'antd';\n\nconst MyForm = () => (\n \u003Cform>\n \u003CInput placeholder=\"Name\" \u002F>\n \u003CButton type=\"primary\">Submit\u003C\u002FButton>\n \u003C\u002Fform>\n);\n\nexport default MyForm;\n```\n\n---\n\n### **总结**\n\n- **TypeScript** 与 React 搭配使用时，能够提高代码质量和开发体验，特别是在大型项目中。\n- **Jest** 和 **React Testing Library** 提供了强大的测试能力，可以编写单元测试和集成测试，确保组件按预期工作。\n- **Apollo Client** 结合 **GraphQL**，能够为数据管理提供灵活且高效的解决方案，减少冗余数据获取。\n- 使用 **Material-UI** 或 **Ant Design** 这样的流行 UI 库可以加快开发速度，并为应用提供现代化的 UI 组件。\n\n通过这些工具和技术，开发者可以在 React 生态系统中构建高效、健壮且可扩展的应用。\n",{"id":158,"created_at":159,"updated_at":159,"code":160,"author_id":7,"book_id":4,"slug":161,"article_id":162,"title":163,"sort_order":158,"content":164,"status":12},121,"2024-09-22T13:50:23.476+08:00","A2KQ7E83","企业级应用开发-121",534,"企业级应用开发","**微前端架构** 是企业级应用开发中一个重要的趋势，它将大型应用划分为多个独立的子应用，由不同的团队进行开发、部署和维护。每个子应用都可以独立更新和部署，彼此之间通过松散耦合的方式集成，这种架构可以极大提升团队协作和开发效率。\n\n在微前端架构中，React 是一种常见的前端框架，因其组件化设计和与微前端模式的良好兼容性，广泛应用于企业级应用开发中。\n\n下面将详细介绍 **微前端原理及实现**，**模块\u002F目录划分**，以及 **微前端架构的搭建**。\n\n---\n\n### **1. 微前端架构的原理**\n\n#### **什么是微前端？**\n\n微前端（Micro Frontends）是将大型前端应用拆分为多个更小、更独立的前端应用，每个应用可以由不同的技术栈、团队负责开发。它类似于后端的微服务架构，但应用在前端层面上。微前端架构的核心目标是提高可维护性、可扩展性以及开发效率。\n\n#### **微前端架构的主要概念：**\n\n- **子应用**：多个独立的前端应用，每个应用可以独立开发、测试、部署和更新。子应用可以使用不同的前端框架（例如 React、Vue 或 Angular）。\n- **主应用**：负责集成各个子应用，并提供统一的入口、路由以及共享的状态管理。\n- **路由隔离**：每个子应用的路由都是独立的，但由主应用进行控制和统一管理。\n- **独立部署**：每个子应用可以独立发布，而不需要重新部署整个系统。\n\n---\n\n### **2. 微前端的实现方式**\n\n微前端的实现有多种方式，常见的有以下几种：\n\n#### **1. iFrame 实现**\n\niFrame 是一种较早的微前端实现方式，通过将子应用嵌入到主应用的 iFrame 标签中。尽管 iFrame 实现简单，但它带来了一些局限性，例如跨域问题、共享状态和通信复杂性，以及 UI 的统一风格难以维护。因此，现代微前端架构中 iFrame 逐渐被淘汰。\n\n#### **2. Web Components**\n\n**Web Components** 是原生 JavaScript 提供的组件化标准，能够在不同的前端框架之间实现组件复用。在微前端架构中，每个子应用可以打包为一个 Web Component，主应用通过 Web Components 进行集成。这种方式适合异构技术栈的微前端项目。\n\n#### **3. 单页应用中的微前端（Single SPA）**\n\n**Single SPA** 是一种流行的微前端框架，它允许你将多个子应用集成在一个单页应用中。Single SPA 通过将路由、应用生命周期等核心逻辑抽象出来，实现各个子应用的无缝集成。\n\n**Single SPA 核心功能：**\n\n- **生命周期管理**：每个子应用可以注册 `mount`、`unmount`、`bootstrap` 等生命周期钩子，保证应用的启动和销毁有序进行。\n- **路由管理**：基于路由规则加载不同的子应用。\n- **技术栈无关**：支持不同的前端框架同时存在，例如在一个微前端系统中，主应用使用 React，子应用可以是 Vue 或 Angular。\n\n---\n\n### **3. 微前端架构的具体实现**\n\n#### **项目结构和模块划分**\n\n假设我们使用 **Single SPA** 来构建微前端架构的企业级应用，项目结构可以参考以下设计：\n\n```bash\nmy-microfrontend-app\u002F\n├── main-app\u002F # 主应用\n│ ├── src\u002F\n│ │ ├── App.js # 主应用入口\n│ │ ├── routes.js # 路由配置\n│ │ └── store.js # 全局状态管理\n│ └── public\u002F\n├── app1\u002F # 子应用1\n│ ├── src\u002F\n│ │ ├── App.js # 子应用入口\n│ │ └── components\u002F # 子应用组件\n├── app2\u002F # 子应用2\n│ ├── src\u002F\n│ │ ├── App.js # 子应用入口\n│ │ └── components\u002F # 子应用组件\n└── shared\u002F # 共享模块\n ├── components\u002F # 共享组件\n └── utils\u002F # 共享工具函数\n```\n\n#### **Single SPA 基础配置**\n\n**安装 Single SPA**\n\n```bash\nnpx create-single-spa\n```\n\n选择创建 root-config 来配置主应用，之后为每个子应用创建相应的配置文件。\n\n**主应用（main-app）配置**\n\n```js\n\u002F\u002F main-app\u002Fsrc\u002Froutes.js\nimport { registerApplication, start } from 'single-spa';\n\nregisterApplication({\n name: 'app1',\n app: () => System.import('app1'),\n activeWhen: ['\u002Fapp1'],\n});\n\nregisterApplication({\n name: 'app2',\n app: () => System.import('app2'),\n activeWhen: ['\u002Fapp2'],\n});\n\nstart();\n```\n\n**子应用（app1）导出生命周期方法**\n\n```js\n\u002F\u002F app1\u002Fsrc\u002Findex.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\u002FApp';\n\nfunction render() {\n ReactDOM.render(\u003CApp \u002F>, document.getElementById('app1-root'));\n}\n\nexport const bootstrap = () => Promise.resolve();\nexport const mount = () => Promise.resolve().then(render);\nexport const unmount = () => Promise.resolve().then(() => {\n ReactDOM.unmountComponentAtNode(document.getElementById('app1-root'));\n});\n```\n\n通过这种方式，主应用控制子应用的挂载和卸载，并根据路由进行切换和渲染。\n\n---\n\n### **4. 微前端架构中的 CI\u002FCD 工具链**\n\n#### **持续集成与部署工具链**\n\n在微前端架构中，每个子应用可以独立开发和部署。因此，建立合理的 CI\u002FCD（持续集成与部署）流程非常关键。常用的 CI\u002FCD 工具有 **GitHub Actions**、**Jenkins**、**CircleCI** 等。\n\n**GitHub Actions 的使用示例：**\n\n- **子应用的自动化构建与部署**：可以为每个子应用单独创建 GitHub Action 文件，设置不同的构建和部署步骤。\n\n```yaml\n# .github\u002Fworkflows\u002Fapp1.yml\nname: Deploy App1\n\non:\n push:\n branches:\n - main\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout code\n uses: actions\u002Fcheckout@v2\n\n - name: Install dependencies\n run: npm install\n\n - name: Build\n run: npm run build\n\n - name: Deploy\n run: echo \"Deploying app1 to server\"\n```\n\n- **主应用的 CI\u002FCD 流程**：可以为主应用配置一个 CI\u002FCD 流程，确保主应用的每次更新都会触发自动化的构建与部署。\n\n#### **Jenkins 配置示例：**\n\nJenkins 是另一种常见的 CI\u002FCD 工具，支持更复杂的流水线配置。可以通过 **Pipeline as Code** 的方式实现自动化构建和部署：\n\n```groovy\npipeline {\n agent any\n stages {\n stage('Checkout') {\n steps {\n git url: 'https:\u002F\u002Fgithub.com\u002Fmyorg\u002Fmain-app.git'\n }\n }\n stage('Install Dependencies') {\n steps {\n sh 'npm install'\n }\n }\n stage('Build') {\n steps {\n sh 'npm run build'\n }\n }\n stage('Deploy') {\n steps {\n sh 'scp -r .\u002Fbuild user@server:\u002Fvar\u002Fwww\u002Fmain-app'\n }\n }\n }\n}\n```\n\n---\n\n### **5. Docker 与容器化部署 React 应用**\n\n微前端应用可以通过 Docker 容器化来部署，保证各个子应用独立运行，并简化依赖管理和环境配置。\n\n#### **Docker 化 React 应用的步骤：**\n\n1. 创建 `Dockerfile`：\n\n```dockerfile\n# 使用 Node.js 作为基础镜像\nFROM node:14\n\n# 设置工作目录\nWORKDIR \u002Fapp\n\n# 复制项目文件到容器中\nCOPY . .\n\n# 安装依赖\nRUN npm install\n\n# 构建项目\nRUN npm run build\n\n# 使用 nginx 作为静态服务器\nFROM nginx:alpine\nCOPY --from=0 \u002Fapp\u002Fbuild \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\n\n# 暴露端口\nEXPOSE 80\n\n# 启动 nginx\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\n2. 构建和运行容器：\n\n```bash\ndocker build -t my-react-app .\ndocker run -p 80:80 my-react-app\n```\n\n通过 Docker，可以将 React 应用打包成容器，确保在不同的环境中拥有一致的运行效果。\n\n---\n\n### **总结**\n\n- **微前端架构** 通过将大型应用拆分为多个独立的子应用，提升了应用的可维护性和团队协作效率。\n- **Single SPA** 是实现微前端的一种流行方案，能够轻松管理多个前端应用的生命周期和路由。\n- 使用 **GitHub Actions** 或 **Jenkins** 等 CI\u002FCD 工具，可以自动化构建、测试和部署流程。\n- **Docker** 提供了容器化解决方案，帮助微前端应用实现更为简洁的部署流程。\n\n这种架构能够帮助企业级应用在持续迭代的过程中保持高效的开发和交付。\n",{"id":166,"created_at":167,"updated_at":167,"code":168,"author_id":7,"book_id":4,"slug":169,"article_id":170,"title":171,"sort_order":166,"content":172,"status":12},122,"2024-09-22T13:52:49.232+08:00","5E65wrXz","多用户权限管理系统项目实现-122",535,"多用户权限管理系统项目实现","构建一个复杂的多用户权限管理系统需要结合微前端架构、实时数据更新、用户认证和安全策略等技术。以下是一个详细的设计方案，包括系统架构、主要模块、技术栈以及具体实现步骤。\n\n---\n\n### **系统架构**\n\n#### **1. 总体架构**\n\n```\nmulti-user-permission-system\u002F\n├── main-app\u002F # 主应用\n│ ├── src\u002F\n│ │ ├── App.js # 主应用入口\n│ │ ├── routes.js # 路由配置\n│ │ └── store.js # 全局状态管理\n├── user-management\u002F # 用户管理子应用\n│ ├── src\u002F\n│ │ ├── App.js # 子应用入口\n│ │ └── components\u002F # 子应用组件\n├── role-management\u002F # 角色管理子应用\n│ ├── src\u002F\n│ │ ├── App.js # 子应用入口\n│ │ └── components\u002F # 子应用组件\n├── permissions-management\u002F # 权限管理子应用\n│ ├── src\u002F\n│ │ ├── App.js # 子应用入口\n│ │ └── components\u002F # 子应用组件\n├── shared\u002F # 共享模块\n│ ├── components\u002F # 共享组件\n│ └── utils\u002F # 共享工具函数\n└── server\u002F # 后端服务\n ├── src\u002F\n │ ├── index.js # 入口\n │ ├── routes\u002F # API 路由\n │ ├── controllers\u002F # 控制器\n │ ├── models\u002F # 数据模型\n │ └── socket.js # WebSocket 实现\n```\n\n### **2. 技术栈**\n\n- **前端**：\n\n - React + React Router\n - Single SPA 或 Module Federation (Webpack 5)\n - Redux 或 Context API 进行状态管理\n - Material-UI 或 Ant Design 用于 UI 组件\n - Axios 用于 HTTP 请求\n- **后端**：\n\n - Node.js + Express\n - MongoDB 或 PostgreSQL 作为数据库\n - JWT（JSON Web Token）进行用户认证\n - Socket.IO 用于实时数据更新\n- **CI\u002FCD**：\n\n - GitHub Actions 或 Jenkins 进行自动化构建与部署\n - Docker 容器化部署\n\n---\n\n### **实现步骤**\n\n#### **1. 后端实现**\n\n**创建 Node.js 后端服务**\n\n```bash\nmkdir server && cd server\nnpm init -y\nnpm install express mongoose jsonwebtoken bcrypt socket.io cors\n```\n\n**基本结构**\n\n```js\n\u002F\u002F server\u002Fsrc\u002Findex.js\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst cors = require('cors');\nconst http = require('http');\nconst socketIo = require('socket.io');\nconst routes = require('.\u002Froutes');\n\nconst app = express();\nconst server = http.createServer(app);\nconst io = socketIo(server);\n\napp.use(cors());\napp.use(express.json());\napp.use('\u002Fapi', routes);\n\nmongoose.connect('mongodb:\u002F\u002Flocalhost:27017\u002Fpermission_system', {\n useNewUrlParser: true,\n useUnifiedTopology: true,\n});\n\nio.on('connection', (socket) => {\n console.log('New client connected');\n\n socket.on('disconnect', () => {\n console.log('Client disconnected');\n });\n});\n\nserver.listen(5000, () => {\n console.log('Server is running on http:\u002F\u002Flocalhost:5000');\n});\n```\n\n**用户模型和认证**\n\n```js\n\u002F\u002F server\u002Fsrc\u002Fmodels\u002FUser.js\nconst mongoose = require('mongoose');\nconst bcrypt = require('bcrypt');\n\nconst UserSchema = new mongoose.Schema({\n username: { type: String, unique: true },\n password: String,\n roles: [String], \u002F\u002F 例如 ['admin', 'editor']\n});\n\nUserSchema.pre('save', async function(next) {\n if (this.isModified('password')) {\n this.password = await bcrypt.hash(this.password, 10);\n }\n next();\n});\n\nUserSchema.methods.comparePassword = function(password) {\n return bcrypt.compare(password, this.password);\n};\n\nmodule.exports = mongoose.model('User', UserSchema);\n```\n\n**用户注册与登录**\n\n```js\n\u002F\u002F server\u002Fsrc\u002Froutes\u002Fauth.js\nconst express = require('express');\nconst User = require('..\u002Fmodels\u002FUser');\nconst jwt = require('jsonwebtoken');\n\nconst router = express.Router();\n\nrouter.post('\u002Fregister', async (req, res) => {\n const { username, password } = req.body;\n const user = new User({ username, password });\n await user.save();\n res.status(201).send({ message: 'User registered' });\n});\n\nrouter.post('\u002Flogin', async (req, res) => {\n const { username, password } = req.body;\n const user = await User.findOne({ username });\n if (!user || !(await user.comparePassword(password))) {\n return res.status(401).send({ message: 'Invalid credentials' });\n }\n const token = jwt.sign({ id: user._id, roles: user.roles }, 'secret_key');\n res.send({ token });\n});\n\nmodule.exports = router;\n```\n\n#### **2. 前端实现**\n\n**主应用配置**\n\n```bash\nmkdir main-app && cd main-app\nnpx create-react-app . --template typescript\nnpm install single-spa react-router-dom axios\n```\n\n**主应用入口**\n\n```tsx\n\u002F\u002F main-app\u002Fsrc\u002FApp.tsx\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport UserManagement from 'user-management';\nimport RoleManagement from 'role-management';\nimport PermissionsManagement from 'permissions-management';\n\nconst App: React.FC = () => {\n return (\n \u003CRouter>\n \u003CSwitch>\n \u003CRoute path=\"\u002Fusers\" component={UserManagement} \u002F>\n \u003CRoute path=\"\u002Froles\" component={RoleManagement} \u002F>\n \u003CRoute path=\"\u002Fpermissions\" component={PermissionsManagement} \u002F>\n \u003C\u002FSwitch>\n \u003C\u002FRouter>\n );\n};\n\nexport default App;\n```\n\n**子应用实现**\n\n在每个子应用中（如 `user-management`），使用 React Router 处理内部路由，并通过 Axios 与后端 API 通信。\n\n```tsx\n\u002F\u002F user-management\u002Fsrc\u002FApp.tsx\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nconst UserManagement: React.FC = () => {\n const [users, setUsers] = useState([]);\n\n useEffect(() => {\n const fetchUsers = async () => {\n const { data } = await axios.get('http:\u002F\u002Flocalhost:5000\u002Fapi\u002Fusers');\n setUsers(data);\n };\n fetchUsers();\n }, []);\n\n return (\n \u003Cdiv>\n \u003Ch1>User Management\u003C\u002Fh1>\n \u003Cul>\n {users.map(user => (\n \u003Cli key={user.id}>{user.username}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n};\n\nexport default UserManagement;\n```\n\n#### **3. 实时数据更新**\n\n**Socket.IO 配置**\n\n在后端和前端都需要配置 Socket.IO，以实现实时数据更新。\n\n**后端 Socket.IO 实现**\n\n```js\n\u002F\u002F server\u002Fsrc\u002Fsocket.js\nconst io = require('socket.io')(server);\n\nio.on('connection', (socket) => {\n console.log('New client connected');\n\n socket.on('updateUser', (userData) => {\n \u002F\u002F 广播用户更新信息\n io.emit('userUpdated', userData);\n });\n});\n```\n\n**前端 Socket.IO 实现**\n\n```tsx\n\u002F\u002F user-management\u002Fsrc\u002FApp.tsx\nimport io from 'socket.io-client';\n\nconst socket = io('http:\u002F\u002Flocalhost:5000');\n\nuseEffect(() => {\n socket.on('userUpdated', (userData) => {\n setUsers(prevUsers => prevUsers.map(user => user.id === userData.id ? userData : user));\n });\n}, []);\n```\n\n#### **4. 权限管理**\n\n通过角色和权限来控制用户访问，确保不同角色的用户访问不同的功能和数据。\n\n**权限中间件**\n\n```js\n\u002F\u002F server\u002Fsrc\u002Fmiddleware\u002Fauth.js\nconst jwt = require('jsonwebtoken');\n\nconst authMiddleware = (req, res, next) => {\n const token = req.headers['authorization'];\n if (!token) return res.sendStatus(401);\n jwt.verify(token, 'secret_key', (err, decoded) => {\n if (err) return res.sendStatus(403);\n req.user = decoded;\n next();\n });\n};\n\nmodule.exports = authMiddleware;\n```\n\n**路由保护**\n\n在特定的 API 路由中使用权限中间件来保护路由。\n\n```js\n\u002F\u002F server\u002Fsrc\u002Froutes\u002Fusers.js\nconst express = require('express');\nconst authMiddleware = require('..\u002Fmiddleware\u002Fauth');\nconst router = express.Router();\n\nrouter.get('\u002F', authMiddleware, async (req, res) => {\n \u002F\u002F 根据用户角色返回不同的用户数据\n});\n```\n\n#### **5. CI\u002FCD 和 Docker**\n\n**Dockerfile**\n\n创建 Dockerfile 来容器化后端服务和前端应用。\n\n```dockerfile\n# Dockerfile for backend\nFROM node:14\nWORKDIR \u002Fapp\nCOPY . .\nRUN npm install\nCMD [\"node\", \"src\u002Findex.js\"]\n```\n\n```dockerfile\n# Dockerfile for frontend\nFROM node:14 AS build\nWORKDIR \u002Fapp\nCOPY . .\nRUN npm install && npm run build\n\nFROM nginx:al\n\npine\nCOPY --from=build \u002Fapp\u002Fbuild \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\n**CI\u002FCD**\n\n使用 GitHub Actions 或 Jenkins 设置 CI\u002FCD 流程，确保每次提交代码后都能自动构建和部署应用。\n\n---\n\n### **总结**\n\n这个复杂的多用户权限管理系统示例结合了以下关键点：\n\n- **微前端架构**：通过分离用户管理、角色管理和权限管理模块，提升系统的可维护性和可扩展性。\n- **实时数据更新**：使用 Socket.IO 实现实时通知，确保用户界面动态更新。\n- **安全策略**：通过 JWT 认证和权限中间件，确保系统安全。\n- **CI\u002FCD 和 Docker**：容器化和自动化部署简化了开发和维护流程。\n\n这样的架构不仅可以满足当前需求，还具备良好的扩展性，能够支持未来的功能需求和用户增长。\n",{"id":174,"created_at":175,"updated_at":175,"code":176,"author_id":7,"book_id":4,"slug":177,"article_id":178,"title":179,"sort_order":174,"content":180,"status":12},123,"2024-09-24T15:16:14.539+08:00","vPKwnoXq","多种用户权限的-saas-应用带有订阅支付系统-123",536,"多种用户权限的 SaaS 应用，带有订阅支付系统","构建一个具有多种用户权限的 SaaS 应用，并集成**支付宝或微信支付系统**，可以分为以下几个主要步骤：\n\n1. **需求分析与系统设计**：确定用户权限和订阅系统的需求。\n2. **用户权限管理**：通过不同的用户角色和权限进行控制。\n3. **支付系统集成**：集成支付宝和微信支付。\n4. **订阅管理**：根据用户订阅进行权限控制，并根据支付结果更新订阅状态。\n5. **安全性**：支付和用户数据的安全策略。\n6. **技术栈选择与环境搭建**：前后端技术栈和数据库设计。\n7. **最终部署**：将系统部署上线，确保系统的自动化运行。\n\n### **1. 需求分析与系统设计**\n\n#### **功能需求**\n\n- **用户注册与登录**：支持 OAuth2 或自定义登录系统。\n- **多用户权限**：例如管理员、普通用户、付费用户等。付费用户可获得更高的权限和功能。\n- **订阅支付系统**：用户可以通过支付宝或微信支付订阅服务，按月或按年续费。\n- **支付结果的处理**：支付成功后，系统自动更新用户权限和订阅状态。\n- **权限控制**：根据用户权限限制不同的访问级别和功能。\n\n#### **系统设计**\n\n- **用户管理模块**：负责用户的注册、登录、权限分配。\n- **支付模块**：负责支付宝\u002F微信支付的处理和支付回调的监听。\n- **订阅管理模块**：根据用户支付结果更新订阅状态，控制用户权限。\n- **权限管理模块**：根据用户角色和订阅状态，控制访问权限。\n\n---\n\n### **2. 用户权限管理**\n\n用户权限管理通过角色来区分，不同的角色（如管理员、普通用户、付费用户）有不同的访问权限。我们可以使用 **JWT** 进行身份验证，并通过角色来分配权限。\n\n**用户注册与登录：**\n\n- **注册用户**：用户可以通过注册表单创建账户，或者使用 OAuth（如 Google 登录）进行快速注册。\n- **用户角色**：可以分为以下几类：\n - **普通用户**：只能访问有限功能。\n - **付费用户**：订阅付费后可访问高级功能。\n - **管理员**：可以管理用户、查看数据等。\n\n**前端用户管理逻辑：**\n\n```tsx\nimport axios from 'axios';\nimport React, { useState, useEffect } from 'react';\n\nconst UserProfile = () => {\n const [user, setUser] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n axios.get('\u002Fapi\u002Fuser-profile').then((res) => {\n setUser(res.data);\n setIsLoading(false);\n });\n }, []);\n\n if (isLoading) return \u003Cp>Loading...\u003C\u002Fp>;\n\n return (\n \u003Cdiv>\n \u003Ch2>Welcome, {user.name}\u003C\u002Fh2>\n \u003Cp>Your role: {user.role}\u003C\u002Fp>\n {user.role === 'paid' && \u003Cp>Access to premium features\u003C\u002Fp>}\n \u003C\u002Fdiv>\n );\n};\n\nexport default UserProfile;\n```\n\n**后端用户角色控制中间件：**\n后端可以通过 JWT 验证用户身份，并检查用户角色来控制访问权限。\n\n```js\nconst jwt = require('jsonwebtoken');\n\nconst authMiddleware = (roles = []) => {\n return (req, res, next) => {\n const token = req.headers.authorization.split(' ')[1];\n if (!token) return res.status(401).json({ message: 'Unauthorized' });\n\n try {\n const user = jwt.verify(token, process.env.JWT_SECRET);\n if (roles.length && !roles.includes(user.role)) {\n return res.status(403).json({ message: 'Forbidden' });\n }\n req.user = user;\n next();\n } catch (error) {\n return res.status(401).json({ message: 'Unauthorized' });\n }\n };\n};\n\n\u002F\u002F 示例：限制只有管理员和付费用户可以访问\napp.get('\u002Fapi\u002Fadmin-dashboard', authMiddleware(['admin', 'paid']), (req, res) => {\n res.json({ message: 'Welcome to admin dashboard!' });\n});\n```\n\n---\n\n### **3. 支付系统集成（支付宝\u002F微信支付）**\n\n我们选择支付宝和微信支付的官方 SDK 进行集成，使用支付宝和微信的**扫码支付**（PC 端）或**移动端支付**方案。\n\n#### **支付宝支付集成**\n\n1. **安装支付宝 SDK**：\n 通过支付宝的官方 SDK 进行集成。在 Node.js 后端中使用支付宝 SDK：\n\n ```bash\n npm install alipay-sdk\n ```\n2. **后端创建支付宝订单**：\n 后端生成订单，并通过支付宝的接口创建支付请求。\n\n ```js\n const AlipaySdk = require('alipay-sdk').default;\n const alipaySdk = new AlipaySdk({\n appId: process.env.ALIPAY_APP_ID,\n privateKey: process.env.ALIPAY_PRIVATE_KEY,\n alipayPublicKey: process.env.ALIPAY_PUBLIC_KEY,\n });\n\n app.post('\u002Fapi\u002Falipay\u002Fcreate-order', async (req, res) => {\n const { userId, amount } = req.body;\n\n const orderInfo = await alipaySdk.exec('alipay.trade.page.pay', {\n bizContent: {\n outTradeNo: `ORDER_${userId}_${Date.now()}`,\n totalAmount: amount,\n subject: 'SaaS Application Subscription',\n productCode: 'FAST_INSTANT_TRADE_PAY',\n },\n return_url: 'https:\u002F\u002Fyour-frontend.com\u002Fpayment-success',\n notify_url: 'https:\u002F\u002Fyour-backend.com\u002Fapi\u002Falipay\u002Fnotify',\n });\n\n res.json({ orderInfo });\n });\n ```\n3. **处理支付宝回调**：\n 支付宝支付成功后会通过 `notify_url` 回调通知后端，后端根据支付结果更新用户的订阅状态。\n\n ```js\n app.post('\u002Fapi\u002Falipay\u002Fnotify', async (req, res) => {\n const { out_trade_no, trade_status } = req.body;\n\n if (trade_status === 'TRADE_SUCCESS') {\n \u002F\u002F 解析订单号，更新用户的订阅状态\n const userId = extractUserIdFromOrder(out_trade_no);\n await updateUserSubscriptionStatus(userId, 'paid');\n }\n\n res.status(200).send('success');\n });\n ```\n\n#### **微信支付集成**\n\n1. **安装微信支付 SDK**：\n 微信支付可以使用官方的 `wxpay` SDK 进行集成。\n\n ```bash\n npm install weixin-pay\n ```\n2. **后端创建微信支付订单**：\n 微信支付订单通过扫码或者公众号支付等方式生成。\n\n ```js\n const WechatPay = require('weixin-pay');\n const wxpay = WechatPay({\n appid: process.env.WX_APP_ID,\n mch_id: process.env.WX_MERCHANT_ID,\n partner_key: process.env.WX_PARTNER_KEY,\n });\n\n app.post('\u002Fapi\u002Fwechat\u002Fcreate-order', (req, res) => {\n const { userId, amount } = req.body;\n\n const orderInfo = {\n body: 'SaaS Application Subscription',\n out_trade_no: `ORDER_${userId}_${Date.now()}`,\n total_fee: amount * 100, \u002F\u002F 金额以分为单位\n spbill_create_ip: req.ip,\n notify_url: 'https:\u002F\u002Fyour-backend.com\u002Fapi\u002Fwechat\u002Fnotify',\n trade_type: 'NATIVE', \u002F\u002F 扫码支付\n };\n\n wxpay.createUnifiedOrder(orderInfo, (err, result) => {\n if (err) return res.status(500).json({ error: err.message });\n res.json({ code_url: result.code_url }); \u002F\u002F 返回二维码链接\n });\n });\n ```\n3. **处理微信支付回调**：\n 支付成功后，微信会通过回调通知后端，后端根据支付结果更新用户的订阅状态。\n\n ```js\n app.post('\u002Fapi\u002Fwechat\u002Fnotify', (req, res) => {\n wxpay.getNotifyData(req.body, async (err, notifyData) => {\n if (err) return res.status(500).send('fail');\n\n if (notifyData.result_code === 'SUCCESS') {\n const userId = extractUserIdFromOrder(notifyData.out_trade_no);\n await updateUserSubscriptionStatus(userId, 'paid');\n }\n\n res.status(200).send('success');\n });\n });\n ```\n\n---\n\n### **4. 订阅管理与权限控制**\n\n#### **订阅状态管理**\n\n用户在支付成功后，系统会更新其订阅状态，并根据订阅状态控制访问权限。\n\n**订阅状态存储在数据库中**，每个用户对应一个 `subscriptionStatus` 字段，该字段可以是 `free`、`paid`、`expired` 等状态。\n\n**订阅状态更新逻辑：**\n\n```js\nconst updateUserSubscriptionStatus = async (userId, status) => {\n \u002F\u002F 更新数据库中用户的订阅状态\n await db.users.update({ id: userId }, { subscriptionStatus: status });\n};\n```\n\n**前端控制显示高级功能**：\n\n```tsx\nconst PremiumFeature = () => {\n const [user, setUser]\n\n = useState(null);\n\n useEffect(() => {\n axios.get('\u002Fapi\u002Fuser-profile').then((res) => {\n setUser(res.data);\n });\n }, []);\n\n if (user.subscriptionStatus !== 'paid') {\n return \u003Cp>You need a premium subscription to access this feature.\u003C\u002Fp>;\n }\n\n return \u003Cdiv>Premium Feature Content\u003C\u002Fdiv>;\n};\n```\n\n---\n\n### **5. 技术栈与部署**\n\n- **前端**：React + Ant Design + Axios。\n- **后端**：Node.js (Express) + MongoDB 或 MySQL。\n- **支付系统**：支付宝 SDK、微信支付 SDK。\n- **身份验证与授权**：JWT + Bcrypt。\n- **安全性**：HTTPS、CSRF 防护、XSS 防护。\n\n---\n\n### **总结**\n\n通过综合使用 **React 前端框架**、**Node.js 后端**、**支付宝\u002F微信支付集成**，以及 **JWT 用户身份认证和权限管理**，我们可以构建一个具有多用户权限管理和订阅系统的 SaaS 应用。通过集成支付系统，用户可以在订阅后获得额外的访问权限。\n",{"id":182,"created_at":183,"updated_at":183,"code":184,"author_id":7,"book_id":4,"slug":185,"article_id":186,"title":187,"sort_order":182,"content":188,"status":12},124,"2024-09-24T15:16:25.265+08:00","zBKVOq64","实时聊天应用-124",537,"实时聊天应用","构建一个完整的实时聊天应用，使用 **WebSocket** 或 **GraphQL 订阅**，具备以下功能：\n\n- **好友列表**：可以查看好友，添加\u002F删除好友，显示好友在线状态。\n- **群聊列表**：支持发起群聊、显示群聊成员在线状态，群聊管理（群主\u002F管理员解散群聊、踢人等功能）。\n- **实时消息**：好友和群聊中的消息可以实时同步。\n\n### **1. 技术栈**\n\n- **前端**：React + Apollo Client（GraphQL）\u002FWebSocket + Ant Design（UI 框架）\n- **后端**：Node.js + GraphQL + WebSocket + MongoDB\n- **数据库**：MongoDB 存储用户、聊天、群组等信息\n- **身份验证**：JWT（用于用户登录和权限验证）\n\n### **2. 项目结构**\n\n```\n\u002Fclient # 前端应用\n \u002Fsrc\n \u002Fcomponents # React 组件\n \u002Fgraphql # GraphQL 订阅与查询\n \u002Fpages # 页面路由\n \u002Fstyles # 样式\n\u002Fserver # 后端应用\n \u002Fmodels # Mongoose 数据模型\n \u002Fresolvers # GraphQL 解析器\n \u002Fsubscriptions # GraphQL 订阅\n \u002Fschema # GraphQL 模式定义\n \u002Fwebsockets # WebSocket 实现\n```\n\n### **3. 数据库设计（MongoDB）**\n\n#### **用户模型（User）**\n\n```js\nconst mongoose = require('mongoose');\n\nconst UserSchema = new mongoose.Schema({\n username: { type: String, required: true, unique: true },\n password: { type: String, required: true },\n friends: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],\n online: { type: Boolean, default: false },\n});\n\nmodule.exports = mongoose.model('User', UserSchema);\n```\n\n#### **群聊模型（Group）**\n\n```js\nconst mongoose = require('mongoose');\n\nconst GroupSchema = new mongoose.Schema({\n name: { type: String, required: true },\n members: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],\n admins: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],\n owner: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },\n});\n\nmodule.exports = mongoose.model('Group', GroupSchema);\n```\n\n#### **消息模型（Message）**\n\n```js\nconst mongoose = require('mongoose');\n\nconst MessageSchema = new mongoose.Schema({\n sender: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },\n content: { type: String, required: true },\n group: { type: mongoose.Schema.Types.ObjectId, ref: 'Group' },\n private: { type: Boolean, default: false },\n recipients: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],\n timestamp: { type: Date, default: Date.now },\n});\n\nmodule.exports = mongoose.model('Message', MessageSchema);\n```\n\n### **4. GraphQL 模式定义**\n\n```js\nconst { gql } = require('apollo-server');\n\nconst typeDefs = gql`\n type User {\n id: ID!\n username: String!\n online: Boolean!\n friends: [User]\n }\n\n type Group {\n id: ID!\n name: String!\n members: [User]\n admins: [User]\n owner: User!\n }\n\n type Message {\n id: ID!\n sender: User!\n content: String!\n group: Group\n private: Boolean\n recipients: [User]\n timestamp: String!\n }\n\n type Query {\n currentUser: User\n friends: [User]\n groups: [Group]\n }\n\n type Mutation {\n addFriend(friendId: ID!): User\n removeFriend(friendId: ID!): User\n createGroup(name: String!): Group\n sendMessage(content: String!, groupId: ID, recipientId: ID): Message\n leaveGroup(groupId: ID!): Group\n deleteGroup(groupId: ID!): Group\n }\n\n type Subscription {\n messageReceived(groupId: ID): Message\n userStatusChanged(userId: ID!): User\n }\n`;\n\nmodule.exports = typeDefs;\n```\n\n### **5. GraphQL 解析器**\n\n#### **用户解析器**\n\n```js\nconst User = require('.\u002Fmodels\u002FUser');\nconst Group = require('.\u002Fmodels\u002FGroup');\nconst Message = require('.\u002Fmodels\u002FMessage');\nconst { PubSub } = require('apollo-server');\n\nconst pubsub = new PubSub();\nconst MESSAGE_RECEIVED = 'MESSAGE_RECEIVED';\nconst USER_STATUS_CHANGED = 'USER_STATUS_CHANGED';\n\nconst resolvers = {\n Query: {\n currentUser: async (_, args, { userId }) => {\n return await User.findById(userId);\n },\n friends: async (_, args, { userId }) => {\n const user = await User.findById(userId).populate('friends');\n return user.friends;\n },\n groups: async (_, args, { userId }) => {\n return await Group.find({ members: userId }).populate('members');\n },\n },\n Mutation: {\n addFriend: async (_, { friendId }, { userId }) => {\n const user = await User.findById(userId);\n const friend = await User.findById(friendId);\n user.friends.push(friendId);\n friend.friends.push(userId);\n await user.save();\n await friend.save();\n return friend;\n },\n removeFriend: async (_, { friendId }, { userId }) => {\n const user = await User.findById(userId);\n user.friends = user.friends.filter((id) => id.toString() !== friendId);\n await user.save();\n return user;\n },\n createGroup: async (_, { name }, { userId }) => {\n const group = new Group({ name, owner: userId, members: [userId], admins: [userId] });\n await group.save();\n return group;\n },\n sendMessage: async (_, { content, groupId, recipientId }, { userId }) => {\n let message;\n if (groupId) {\n const group = await Group.findById(groupId);\n message = new Message({\n sender: userId,\n content,\n group: groupId,\n });\n group.members.forEach((member) => {\n pubsub.publish(MESSAGE_RECEIVED, { messageReceived: message });\n });\n } else {\n message = new Message({\n sender: userId,\n content,\n recipients: [recipientId],\n private: true,\n });\n pubsub.publish(MESSAGE_RECEIVED, { messageReceived: message });\n }\n await message.save();\n return message;\n },\n leaveGroup: async (_, { groupId }, { userId }) => {\n const group = await Group.findById(groupId);\n group.members = group.members.filter((id) => id.toString() !== userId);\n await group.save();\n return group;\n },\n deleteGroup: async (_, { groupId }, { userId }) => {\n const group = await Group.findById(groupId);\n if (group.owner.toString() === userId) {\n await group.remove();\n return group;\n }\n throw new Error('Only the group owner can delete the group.');\n },\n },\n Subscription: {\n messageReceived: {\n subscribe: (_, { groupId }) => pubsub.asyncIterator(MESSAGE_RECEIVED),\n },\n userStatusChanged: {\n subscribe: (_, { userId }) => pubsub.asyncIterator(USER_STATUS_CHANGED),\n },\n },\n};\n\nmodule.exports = resolvers;\n```\n\n### **6. 前端实现**\n\n#### **用户界面设计**（React + Ant Design）\n\n```jsx\nimport React, { useState, useEffect } from 'react';\nimport { useQuery, useMutation, useSubscription } from '@apollo\u002Fclient';\nimport { Layout, Menu, Input, Button } from 'antd';\nimport { FRIENDS_QUERY, GROUPS_QUERY, SEND_MESSAGE_MUTATION, MESSAGE_RECEIVED_SUBSCRIPTION } from '.\u002Fgraphql\u002Fqueries';\nconst { Sider, Content } = Layout;\n\nconst ChatApp = () => {\n const { data: friendsData } = useQuery(FRIENDS_QUERY);\n const { data: groupsData } = useQuery(GROUPS_QUERY);\n const [sendMessage] = useMutation(SEND_MESSAGE_MUTATION);\n const { data: newMessage } = useSubscription(MESSAGE_RECEIVED_SUBSCRIPTION);\n const [message, setMessage] = useState('');\n\n useEffect(() => {\n if (newMessage) {\n \u002F\u002F Update UI with new message\n }\n }, [newMessage]);\n\n const handleSendMessage = () => {\n sendMessage({ variables: { content: message } });\n setMessage('');\n };\n\n return (\n \u003CLayout>\n \u003CSider>\n \u003CMenu mode=\"inline\">\n \u003CMenu.ItemGroup title=\"Friends\">\n {friendsData?.friends.map((friend) => (\n \u003CMenu.Item key={friend.id}>{friend.username} ({friend.online ? 'Online' : 'Offline'})\u003C\u002FMenu.Item>\n ))}\n \u003C\u002FMenu.ItemGroup>\n \u003CMenu.ItemGroup title=\"Groups\">\n {groupsData?.groups.map((group) => (\n \u003CMenu.Item key={group.id}>{group.name}\u003C\u002FMenu.Item>\n ))}\n \u003C\u002FMenu.ItemGroup>\n \u003C\u002FMenu>\n \u003C\u002FSider>\n \u003CLayout>\n \u003CContent>\n \n\n \u003Cdiv>\n \u003CInput\n value={message}\n onChange={(e) => setMessage(e.target.value)}\n onPressEnter={handleSendMessage}\n \u002F>\n \u003CButton onClick={handleSendMessage}>Send\u003C\u002FButton>\n \u003C\u002Fdiv>\n \u003C\u002FContent>\n \u003C\u002FLayout>\n \u003C\u002FLayout>\n );\n};\n\nexport default ChatApp;\n```\n\n### **7. WebSocket 实现**\n\n如果使用 WebSocket 而非 GraphQL 订阅，可以将 WebSocket 实现为独立服务，监听用户的消息事件，广播给其他用户。\n\n### **总结**\n\n这套代码展示了如何使用 **React**、**GraphQL**（或 **WebSocket**）、**MongoDB** 构建一个完整的实时聊天应用。通过 GraphQL 订阅或者 WebSocket，确保消息实时同步，同时支持群聊、好友管理以及权限功能。\n",{"id":134,"created_at":135,"updated_at":135,"code":136,"author_id":7,"book_id":4,"slug":137,"article_id":138,"title":139,"sort_order":134,"content":140,"status":12}]